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 元素的大小。
一共有下面的5个元素可以设置 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-start, marker-mid, 和 marker-end 属性，来引用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>
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
