<!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>SVG draw text</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<style>
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
#sp
{
display: block;
width: 100%;
height: 100%;
margin: auto;
font-family: verdana, sans-serif;
font-size: 570%;
fill: #003565;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="450" height="450" viewBox="0 0 450px 355px">
<text x="10" y="20" transform="rotate(-5 40,50)" fill="red">Rotated SVG text</text>
<text x="10" y="20" transform="rotate(5 40,50)" fill="blue">geovinu love you</text>
<text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
rotate="5,15,25,35,45,55">
Not
<tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
all characters
<tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
in
<tspan id="child3">
the
</tspan>
</tspan>
<tspan id="child4" fill="orange" x="40" y="90">
text
</tspan>
have a
</tspan>
<tspan id="child5" rotate="-10" fill="blue">
specified
</tspan>
rotation
</text>
</svg>
<svg version="1.1" height="400" width="550">
<path d="M 0 100
L 100 100
A 100 100 0 1 1 300 100
L 400 100 " stroke="black" stroke-width="1" fill="none"></path>
</svg>
<div style="background:#cccccc;">
<object id="sp" type="image/svg+xml" data="sitepoint.xml">SitePoint</object>
</div>
<svg xmlns="https://www.w3.org/2000/svg" viewBox="50 20 2050 680" preserveAspectRatio="xMidYMid meet">
<title>SitePoint</title>
<desc>The SitePoint Logo</desc>
<g id="main">
<polyline points="100,100 150,100 170,150 120,150" fill="#003565"/>
<polyline points="170,100 220,100 240,150 190,150" fill="#003565"/>
<polyline points="120,45 170,45 150,95 100,95" fill="#ff6400"/>
<polyline points="190,155 240,155 220,205 170,205" fill="#ff6400"/>
<text id="sp" x="240" y="150">sitepoint</text>
</g>
</svg>
</body>
</html>
https://visionary.com/blog/making-an-animated-svg-checkbox/
https://www.svgviewer.dev/ 编辑SVG大小
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
https://vega.github.io/vega/docs/marks/path/
https://github.com/vega/vega
https://parceljs.org/languages/svg/
https://github.com/parcel-bundler/website
https://github.com/jamesmh/coravel
https://css-tricks.com/accessible-svgs/
https://jakearchibald.github.io/svgomg/
https://jenkov.com/tutorials/svg/text-element.html
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
https://www.jayfreestone.com/writing/wrappping-text-inside-svg-css/
https://www.w3.org/TR/SVG/text.html
https://www.informit.com/articles/article.aspx?p=31799&seqNum=2
https://www.rgraph.net/svg/text.html
https://github.com/software-mansion/react-native-svg/issues/972
Red Hot Chilli Peppers Logo in SVG, Animated
https://codepen.io/dudleystorey/pen/grOgLp
https://github.com/kothing/svg-path-editor
https://github.com/TNTx1995/svg_path_editor
https://github.com/Yqnn/svg-path-editor
https://yqnn.github.io/svg-path-editor/
https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/
https://www.sitepoint.com/css-with-svg/
标签：Draw,github,SVG,text,https,svg,com From： https://www.cnblogs.com/geovindu/p/16939869.html