<!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