<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>geovindu</title> <meta name="Description" content="geovindu"/> <meta name="Keywords" content="geovindu"/> <meta name="author" content="geovindu"/> <script src="js/jquery-3.6.0.js"></script> <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel='stylesheet' href='bootstrap/4.6.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <h1>Non-Scaling SVG</h1> <svg class="defs-only" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="coin" x2="50%" y2="40%" spreadMethod="reflect"> <stop stop-color="gold" offset="30%" /> <stop stop-color="goldenrod" offset="70%" /> <stop stop-color="white" offset="82%" /> <stop stop-color="gold" offset="92%" /> <stop stop-color="darkgoldenrod" offset="100%" /> </linearGradient> <radialGradient id="pot" fx="30%" fy="35%"> <stop stop-color="white" offset="0%" /> <stop stop-color="gold" offset="15%" /> <stop stop-color="goldenrod" offset="80%" /> <stop stop-color="darkgoldenrod" offset="100%" /> </radialGradient> <symbol id="potofgold" > <g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5"> <circle r="5" transform="translate(30,7)" /> <circle r="5" transform="translate(35,13)" /> <circle r="5" transform="translate(22,10)" /> <circle r="5" transform="translate(27,9)" /> <circle r="5" transform="translate(18,17)" /> <circle r="5" transform="translate(42,18)" /> <circle r="5" transform="translate(32,19)" /> <circle r="5" transform="translate(30,14)" /> <circle r="5" transform="translate(25,15)" /> <circle r="5" transform="translate(37,19)" /> <circle r="5" transform="translate(31,16)" /> <circle r="5" transform="translate(20,18)" /> <circle r="5" transform="translate(26,21)" /> </g> <path fill="url(#pot)" stroke="#751" stroke-width="0.5" d="M30,50 C45,50 55,45 55,35 Q 55,27 50,25 C55,22 53,15 45,20 S 23,25 15,20 S5,22 10,25 Q 5,27 5,35 C5,45 15,50 30,50Z" /> </symbol> </svg> <figure> <figcaption>50x25</figcaption> <div> <svg width="50" height="25"> <use xlink:href="#potofgold"/> </svg> </div> </figure> <figure> <figcaption>100x50</figcaption> <div> <svg width="100" height="50"> <use xlink:href="#potofgold"/> </svg> </div> </figure> <figure> <figcaption>200x100</figcaption> <div> <svg width="200" height="100"> <use xlink:href="#potofgold"/> </svg> </div> </figure> <figure> <figcaption>200x50</figcaption> <div> <svg width="200" height="50"> <use xlink:href="#potofgold"/> </svg> </div> </figure> <figure> <figcaption>50x50</figcaption> <div> <svg width="60" height="50"> <use xlink:href="#potofgold"/> </svg> </div> </figure> <figure> <figcaption>Default Size</figcaption> <div> <svg> <use xlink:href="#potofgold"/> </svg> </div> </figure> </div> <div class="Charting" id="MetricContainer" width="500" height="500" style="height:100%;width:100%;"> <svg height="100%" width="100%" viewBox="0 0 500 525"> <g> <image x="20" y="20" xlink:href="./pc/1.png"> <text x="10" y="20" transform="rotate(25 40,50)" fill="red">Rotated SVG text</text> <text x="-510" y="150" transform="rotate(55 40,50)" fill="#000000">2022-11-20</text> <text x="20" y="40" transform="rotate(30 20,40)" style="stroke:none; fill:#000000;" >Rotated SVG text</text> </g> </svg></div> <svg xmlns="http://www.w3.org/2000/svg"> <text x="10" y="20" style="writing-mode: tb;"> Vertical </text> </svg> <img src="flower.svg" class="fa-square-full"/> <svg xmlns="http://www.w3.org/2000/svg"> <text x="10" y="20" style="writing-mode: tb;"> 垂直文字 </text> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <text x="20" y="40" transform="rotate(30 20,40)" style="stroke:none; fill:#000000;" >Rotated SVG text</text> </svg> <div class="container"> <svg width="700" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> <image x="20" y="20" xlink:href="./pc/2.png" /> <text x="180" y="750" transform="rotate(2 180,250)" style="fill:#000;">革命尚未成功,努力仍将继续!</text> </svg> </div> </body> </html>
https://github.com/heathcliff/css3-mediaqueries-js
https://github.com/GestiXi/image-scale
https://github.com/sdras/svg-workshop
https://github.com/oreillymedia/svg-essentials-examples
标签:draw,github,SVG,image,https,text,com From: https://www.cnblogs.com/geovindu/p/16955635.html