svg教程
参考：https://segmentfault.com/a/1190000012071386
svg标签
<svg width="100" height="100" viewBox="50 50 50 50"> <circle id="mycircle" cx="50" cy="50" r="50" /> </svg> viewBox属性指定视口从(50, 50)从这一点开始，视口的宽度和高度分别为50。
*****注意，视觉必须适应空间。在上述代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视野会被放大来适应 SVG 图像的大小是放大的四倍。也就是说，viewbox对原本的svg位置和宽度 做了相同比例的缩放。
*****如果不指定width属性和height属性，只指定viewBox属性相当于只给定 SVG 图像的长宽比。SVG 图像的默认大小将等于所在 HTML 元素的大小。
可以设置以下五个元素 viewbox:
除了 元素之外，其他元素使用preserveAspectRatio必须在同一元素上 viewBox 提供的值。如果不提供属性 viewBox ，则忽略了preserveAspectRatio。
内置图形
rect(矩形) <rect x="0" y="0" width="100" height="100" fill="pink"></rect> circle(圆) <circle cx="50" cy="50" r="50" fill="pink"></circle> ellipse(椭圆) <ellipse cx="50" cy="50" rx="100" ry="50" fill="pink"></ellipse> line(直线) <line x1="0" y1="0" x2="10" y2="10" style="stroke:red;stroke-width:2"></rect> polyline(折线) <polyline points="50,0 60,10 60,20" fill="none" stroke-width="1" stroke="red"></polyline> <!--第一个点不会和最后一个点连起来，不会闭合。此处将fill设置为none，可以仅仅画曲线，而如果fill有值，则会形成由曲线围城的多边形--> polygon(多边形) <polygon points="50,0 60,10 60,20" fill="pink"></polygon> <!--第一个点和最后一个点会连接起来，形成闭合的图形--> path(路径) text(文本) <text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90"> I LOVE <tspan fill="red">D3</tspan></text> image(图形) <image href="*******" x="0" y="0" height="200" width="300"/> <!--默认图像不会缩放，即使定义了height，width，也不会缩放铺满剩余区域--> use(复制元素) <circle cx="50" cy="50" r="5" fill="pink" id="circle"></circle> <use href="#circle" x="60"></use> <!--当use复制其他元素后，还能对复制的元素进行属性的覆盖。 x, y, width, height，href这几个属性，不管源 元素是否有设置，都可以覆盖。 而其他属性，如果源 元素已经设置，则无法覆盖，如果没有设置，则可以再use上设置-->
内置图形的html属性或(css样式)
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]
path
命令 名称 参数
M moveto 移动到 (x y)+
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)+
H horizontal lineto 水平线到 x+
V vertical lineto 垂直线到 y+
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)+
T smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)+
如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置。
<svg width="200" height="200">
<path d="M100 100 H200 L100 0 Z" fill="red" stroke="blue" stroke-width="2"/>
</svg>
容器元素
g（分组容器）
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- 将g中的元素作为一个整体，统一设置stroke，transform等 -->
<g id="myG" stroke="green" transform="rotate(20 20,40)" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
<!-- 使用use复制g，并且覆盖fill属性 -->
<use href="#myG" x="100" fill="blue" />
</svg>
a(链接元素)
点击图形，跳转到指定链接
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- A link around a shape -->
<a href="/docs/Web/SVG/Element/circle">
<circle cx="50" cy="40" r="35"/>
</a>
</svg>
*****注意： 在获取svg的a元素时，为了区分html的a元素，要加命名空间
//css
@namespace svg url(http://www.w3.org/2000/svg);
svg|a {
}
defs
用来存储在后续将会用到的图像，必须在后续通过其他元素 引用才能呈现。
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- 定义一个线性渐变，外部的所有元素都可以引用这个效果 -->
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="gold" />
<stop offset="90%" stop-color="pink" />
</linearGradient>
</defs>
<!-- 在defs的外部通过使用url(defs中的id值) 来引用defs中定义的图形 -->
<circle id="myCircle" cx="0" cy="0" r="5" fill="url('#myGradient')" />
</svg>
symbol
定义一个模板元素，本身是不会呈现的，只有使用use引用后，才会呈现出来
<svg viewBox="0 0 100 100" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- symbol definition NEVER draw -->
<symbol id="sym01" viewBox="0 0 150 110">
<circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
<circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white" />
</symbol>
<!-- actual drawing by "use" element -->
<use xlink:href="#sym01" x="0" y="0" width="100" height="50" />
</svg>
marker
marker元素定义了用于在给定的
marker有如下属性:
- markerHeight: 定义marker元素的高度
- markerWidth: 定义marker元素的宽度
- markerUnits: 该属性为markerWidth、markerHeight以及marker的内容 定义了坐标系统。 userSpaceOnUse|strokeWidth
- orient：定义marker相对于寄宿元素的方向，值有auto|auto start-reverse|。
- refX: marker元素相对于X轴的偏移。和正常坐标系相反，正值向左，负值向右。
- refY：marker元素相对于Y轴的偏移。和正常坐标系相反，正值向上，负值向下。
- viewBox： 当前marker片段定义SVG视图端口的边界。
- preserveAspectRatio：定义了如果marker片段嵌入到具有不同纵横比的容器中，则必须如何对其进行变形。
注意： 如果一个元素定义了marker-start，那么就在开头的位置添加marker， 如果一个元素定义了marker-mid，那么就在所有中间位置添加marker， 如果一个元素定义了marker-end，那么就在结尾位置添加marker。
可以定义多个，那么也就添加多个。
<svg width="1000" height="1000"viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 定义一个箭头标记-->
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="16" markerHeight="6" markerUnits="strokeWidth" preserveAspectRatio="none" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- 定义一个点标记 -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="blue" />
</marker>
</defs>
<!-- 在开头和结尾位置添加 marker，开头为10,10 结尾为90，90 -->
<polyline points="10,10 10,120 120,120" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" />
<!-- 在开头，结尾和中间 位置添加 marker，开头为15,80 结尾为85,15，其余全为中间 -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
</svg>
渐变
分为线形渐变和径向渐变，渐变本身不会渲染，必须通过具体元素的fill引用才生效
<svg width="500"
height="600"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%">
<!--x1,y1 x2,y2用来定义径向渐变的方向，此处为向右-->
<stop offset="0%"
stop-color="blue" />
<stop offset="100%"
stop-color="red" />
</linearGradient>
<radialGradient id="irisGradient">
<stop offset="25%"
stop-color="green" />
<stop offset="100%"
stop-color="dodgerblue" />
</radialGradient>
</defs>
<rect fill="url(#myGradient)"
x1="10"
y1="10"
width="300"
height="100" />
</svg>