SVG 之 基本用法

SVG有一些预定义的形状元素

线 <line>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
多边形 <polygon>
折线 <polyline>
路径 <path>

通用属性

stroke  定义一条线，文本或元素轮廓颜色
stroke-width 定义了一条线，文本或元素轮廓厚度
stroke-linecap 定义不同类型的开放路径两端的形状(butt | round | square | inherit)
stroke-dasharray 创建虚线 (线长, 线长, 线长,...) 如2,10,5,20

通用的 style 属性用来定义 CSS 属性

fill 属性定义形状的填充颜色（rgb 值、颜色名或者十六进制值）
fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
stroke 属性定义形状边框的颜色
stroke-width 属性定义形状边框的宽度
stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

线 line

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
style 属性用来定义 CSS 属性
stroke-width 线条宽度，坐标网格线位于线条的正中间，可以使用css的shape-rendering值来控制反锯齿特性
stroke 线条颜色
stroke-opacity 线条的不透明度
stroke-dasharray 虚线，值是数字,便是虚线段的长度,线长-间隙-线长-间隙…

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line 
        x1="0" y1="0" x2="200" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2;stroke-opacity:.5;stroke-dasharray:2,10,5,20;"/>
</svg>

矩形 rect

width 和 height 属性可定义矩形的高度和宽度
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
rx 和 ry 属性可使矩形产生圆角。

style 属性用来定义 CSS 属性
fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
stroke 属性定义矩形边框的颜色
stroke-width 属性定义矩形边框的宽度
stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect 
        x="50" y="20" rx="10" ry="20" width="300" height="100" 
        style="fill: #0000ff;stroke-width:10;stroke:#000;fill-opacity:0.1;stroke-opacity:0.9">
    </rect>
</svg> 

圆形 circle

cx和cy属性定义圆点的x和y坐标。默认(0, 0)
r属性定义圆的半径
fill 填充颜色
fill-opacity 填充不透明度
stroke 边框颜色
stroke-width 边框宽度，边框在圆的边界上的，一半在圆/椭圆外，一半在圆/椭圆内

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle 
    cx="100" cy="50" r="40" stroke="black" stroke-width="20" fill="red"
    style="fill: #0000ff;stroke-width:10;stroke:#000;fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

椭圆 ellipse

cx属性定义的椭圆中心的x坐标
cy属性定义的椭圆中心的y坐标
rx属性定义的水平半径
ry属性定义的垂直半径

style 属性用来定义 CSS 属性
fill 填充颜色
fill-opacity 填充不透明度
stroke 边框颜色
stroke-width 边框宽度，边框在圆的边界上的，一半在圆/椭圆外，一半在圆/椭圆内

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
    <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>

多边形 polygon

points 属性定义多边形每个角的 x 和 y 坐标

style 属性用来定义 CSS 属性
fill 填充颜色
fill-opacity 填充不透明度
stroke 边框颜色
stroke-width 边框宽度
fill-rule 填充规则，如果多边形的边有交叉情况, 指定如何判断图形的“内部”, (mozero(默认)|evenodd),
应用于: shape形状类元素 和 文字内容类元素

<svg height="210" width="500">
    <polygon points="100,10 40,198 190,78 10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

折线 polyline

创建任何只有直线的形状
属性 同 直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
   style="fill:none;stroke:black;stroke-width:3" />
</svg>

路径

path元素可以通过制定一系列相互连接的线、弧、曲线来绘制任意形状的轮廓，
这些轮廓也可以填充或者绘制轮廓线，也可以用来定义裁剪区域或蒙版。

路径的填充同样可以使用fill-rule属性指定填充规则，
如果需要填充一个中空的形状，则只需要注意外侧路径顺逆时针方向和内侧空心区域顺逆时针方向即可。

path命令

大写表示绝对坐标，小写表示相对坐标

M: x y 移动画笔到制定坐标
L: x y 绘制一条到给定坐标的线
H: x 绘制一条到给定x坐标的横线
V: y 绘制一条到给定y坐标的垂线
A: rx ry x-axis-rotation large-arc sweep x y 圆弧曲线命令有7个参数，依次表示x方向半径、y方向半径、旋转角度、大圆标识、顺逆时针标识、目标点x、目标点y。
大圆标识和顺逆时针以0和1表示。0表示小圆、逆时针
Q: x1 y1 x y 绘制一条从当前点到x,y控制点为x1,y1的二次贝塞尔曲线
T: x y 绘制一条从当前点到x,y的光滑二次贝塞尔曲线，控制点为前一个Q命令的控制点的中心对称点，如果没有前一条则已当前点为控制点。
C: x1 y1 x2 y2 x y 绘制一条从当前点到x,y控制点为x1,y1 x2,y2的三次贝塞尔曲线
S: x2 y2 x y 绘制一条从当前点到x,y的光滑三次贝塞尔曲线。第一个控制点为前一个C命令的第二个控制点的中心对称点，如果没有前一条曲线，则第一个控制点为当前的点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
    <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
    <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
    <!-- Mark relevant points -->
    <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
    </g>
    <!-- Label the points -->
    <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
    </g>
</svg>

文本 text tspan

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
    <text x="10" y="60" style="fill:red;">
        Several lines:
        <tspan x="10" y="75">First line</tspan>
        <tspan x="10" y="100">Second line</tspan>
    </text>
</svg>

a标签 跳转

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
        <text x="0" y="15" fill="red">I love SVG</text>
    </a>
</svg>

按路径显示

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
    </defs>
    <text x="10" y="100" style="fill:red;">
        <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
    </text>
</svg>

参考

https://developer.mozilla.org/zh-CN/docs/Web/SVG
https://www.runoob.com/svg/svg-tutorial.html
https://d3js.org.cn/svg/get_start/