Last Updated: 2024-03-10 01:56:44 Sunday
-- TOC --
SVG，Scalable Vector Graphics。SVG图像区别于Bitmap-based图像（JPEG或PNG等），在于SVG图像用描述的方式画图，而不是用像素点画图。它支持动画，能直接集成到HTML文档，兼容JavaScript，能随意缩放不失真。SVG是W3C标准，它很有趣！
最新SVG2标准：https://www.w3.org/TR/SVG/Overview.html
把SVG文件当做一个图片文件，MIME为image/svg+xml。
<img src="circle.svg">
<img src="data:image/svg+xml;base64,<data>">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
CSS中的使用也是一样：
.logo {
background: url(icon.svg);
}
默认的坐标系统是top left (0,0)，向右向下增长，单位是pixel！
与HTML/CSS中申明颜色一样，多种方式均可。
按照代码从上到下的顺序，先画的物体在后面，后画的物体在前面，因此后画的物体可能会遮挡住前面画的物体。
svg tag可以带width和height两个属性，可以填写百分比，也可以填写具体像素值。如果都没有，svg区域默认是300x150大小。
另外就是viewBox属性，这个属性的值有四个数字，分别是左上角的横坐标x和纵坐标y、视窗大小的宽度和高度。
两点确定一条直线，不过这两个点是起始点，因此line画的是线段。
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="100" x2="100" y2="0" stroke-width="1" stroke="black" />
<line x1="20" y1="100" x2="120" y2="0" stroke-width="1.5" stroke="red" />
<line x1="40" y1="100" x2="140" y2="0" stroke-width="2" stroke="blue" />
<line x1="60" y1="100" x2="160" y2="0" stroke-width="2.5" stroke="green" />
<line x1="80" y1="100" x2="180" y2="0" stroke-width="3" stroke="yellow" />
<line x1="100" y1="100" x2="200" y2="0" stroke-width="3.5" stroke="aqua" />
<line x1="120" y1="100" x2="220" y2="0" stroke-width="4" stroke="orange" />
<line x1="140" y1="100" x2="240" y2="0" stroke-width="4.5" stroke="salmon" />
<line x1="160" y1="100" x2="260" y2="0" stroke-width="5" stroke="tomato" />
<line x1="180" y1="100" x2="280" y2="0" stroke-width="8" stroke="cyan" />
</svg>
x1,y1,x2,y2表示,stroke-width设置线宽，可以是小数，stroke设置颜色，<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="15" y1="15" x2="240" y2="300" stroke-width="36" stroke="blue" stroke-linecap="round" />
<line x1="15" y1="15" x2="240" y2="300" stroke-width="24" stroke="aqua" stroke-dasharray="8,3,2,18" />
<line x1="15" y1="155" x2="160" y2="60" stroke-width="36" stroke="blue" />
<line x1="15" y1="155" x2="160" y2="60" stroke-width="24" stroke="salmon" stroke-dasharray="8,3,2" />
<line x1="160" y1="100" x2="320" y2="100" stroke-width="4" stroke="black" stroke-dasharray="4,4" />
<line x1="160" y1="120" x2="320" y2="120" stroke-width="16" stroke="navy" stroke-linecap="round" />
</svg>
300x150，超出此范围的图像不显示，flat风格，stroke-linecap="round"设置线段两端为round，stroke-dasharray="8,3,2,18"表示8 aqua, 3 clear, 2 aqua, 18 clear...如此循环，这是偶数模式，如果只有两个数，也是如此循环...stroke-dasharray="8,3,2"表示8 salmon, 3 clear, 2 salmon, 8 clear...，奇数循环，本小站返回上一层目录的SVG图标：
<svg width="220" height="180" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" height="100" width="100" fill="red" stroke="green" stroke-width="1" />
<rect x="50" y="50" height="100" width="100" fill="none" stroke="cyan" stroke-width="4" />
<rect x="100" y="100" height="60" width="100" fill="yellow" stroke="salmon" stroke-width="4" stroke-dasharray="4,6" />
</svg>
stroke-dasharray属性同linefill可以填none，就成了透明的，前面的画的图像能显示出来<div><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="30" fill="lightgreen" stroke="red" stroke-width="2" />
<circle cx="100" cy="100" r="60" fill="none" stroke="#579" stroke-width="30"
stroke-dasharray="3,5,8,13" />
</svg></div>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="100" rx="30" ry="30" fill="lightgreen" stroke="red" stroke-width="2" />
<ellipse cx="100" cy="100" rx="60" ry="40" fill="none" stroke="#579" stroke-width="30"
stroke-dasharray="4,6" />
</svg>
本文链接：https://cs.pynote.net/sf/202402289/
-- EOF --
-- MORE --