SVG-标签

属性	含义
x1	属性在 x 轴定义线条的开始
y1	属性在 y 轴定义线条的开始
x2	属性在 x 轴定义线条的结束
y2	属性在 y 轴定义线条的结束

属性	含义
`points`	指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔

属性	含义
`cx`	圆心`x`轴坐标
`cy`	圆心`y`轴坐标
`r`	半径

属性	含义
`x`	左上角`x`轴坐标，默认值为0
`y`	左上角`y`轴坐标，默认值为0
`width`	宽
`height`	高
`rx`	圆角弧度
`ry`	圆角弧度

属性	含义
`cx`	圆心`x`轴坐标
`cy`	圆心`y`轴坐标
`rx`	水平半径
`ry`	垂直半径

属性	含义
`d`	表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。

M：移动到（moveto）,后紧跟点x坐标及y坐标，用空格分割
L：画直线到（lineto），后紧跟点x坐标及y坐标，用空格分割，坐标必须成对存在，多个坐标用空格分割
H：水平画直线到（horizontal lineto），后紧跟需要水平移动到的X轴坐标
V：垂直画直线到（vertical lineto），后紧跟需要水平移动到的Y轴坐标
C：立方贝赛尔曲线(curveto),它需要考虑两个控制点。立方贝塞尔曲线的句法是：”C c1x,c1y c2x,c2y x,y“或者”c dc1x,dc1y dc2x,dc2y dx,dy“，在这里，c1x、c1y和c2x、c2y是分别是初始点和结束点的控制点的绝对坐标。dc1x、dc1y和dc2x、dc2y都是相对于初始点，而不是相对于结束点的。dx和dy分别是向右和向下的距离
S：平滑的贝塞尔曲线(smooth curveto),语法是”S cx,cy x,y“或者”s dcx,dcy dx,dy“，在这里(d)cx指定第二个控制点。
Q：二次方贝塞尔曲线(quadratic Belzier curve), 控制点的两端是相同的。二次方贝塞尔曲线的句法是”Q cx, cy x, y“或”q dcx, dcy dx, dy“。cx和cy都是控制点的绝对坐标，而dcx和dcy分别是控制点在x和y方向上的距离。
T：二次方贝塞尔平滑曲线smooth quadratic Belzier curveto，它假定第一个控制点是从前一个控制点关于前一个点的反射，或者说如果没有前一个控制点的话它实际上就是前一个点。T的句法是”T x,y“或者”t dx,dy“，分别对应于绝对坐标和相对距离，用来创建二次方贝塞尔曲线。
A：椭圆弧曲线路径（elliptical Arc），”A rx,ry xAxisRotate,LargeArcFlag,SweepFlag x,y“。解构它，rx和ry分别是x和y方向的半径，而LargeArcFlag的值要到是0要么是1，用来确定是要画小弧（0）还是画大弧（1）。SweepFlag也要么是0要么是1，用来确定弧是顺时针方向（1）还是逆时针方向（0）。x和y是目的地的坐标。
Z：闭合路径（closepath）

!> 注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<svg width="100" height="50">
  <path d="M 0 0
   H 10
   V 10
   H 20
   V 20
   L 0 10 0 20
   C 100,0 " stroke="red"/>
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

文本`<text>`

属性	含义
`x`	文本起始横坐标
`y`	文本起始纵坐标

<text> 元素可以通过<tspan> 元素来分组成多行来显示。每个 tspan 元素可以定义自己独特的格式和位置。

!> 文字的样式可以用class或style属性指定。

<svg width="200" height="50" xmlns:xlink="https://www.w3.org/1999/xlink">
    <text x="0" y="25">
        <tspan>hello svg</tspan>
        <tspan x="10" y="40">多行文本</tspan>
        <a xlink:href="www.baidu.com" target="_blank">
            <text x="0" y="15" fill="red">链接文本</text>
        </a>
    </text>
    <circle cx="100" cy="25" r="25" fill="#ff5e5e1a" />
    <text x="100" y="25" fill="red" style="dominant-baseline:middle;text-anchor:middle;">居中</text>
</svg>

xmlns:xlink=""这一句引入了xlink命名空间，以支持链接元素属性定义。
xlink:href和html中的a链接类似，只是多了xlink的命名空间前缀，用来表示链接的目的地址。

复用`<use>`

use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。
出于安全原因，一些浏览器可能在use元素上应用同源策略，还有可能拒绝载入xlink:href属性内的跨源URI。

属性	含义
`x`	左上角横坐标
`y`	左上角纵坐标
`width`	区域宽
`height`	区域高
`xlink:href`	引入复制节点

<svg width="100" height="50">
  <text id="useText" x="0" y="10">hello svg</text>
  <use xlink:href="#useText" x="0" y="20"/>
</svg>

多边形`<polygon>`

属性	含义
`points`	定义多边形每个角的`x`和`y`坐标, `x`和`y`用`,`分割，坐标之间用空格分割

<svg width="100" height="50">
  <polygon points="50,0 0,50 100,50"/>
</svg>

分组`<g>`

<g>标签用于将多个形状组成一个组（group），方便复用和管理。

<svg width="300" height="100">
  <g id="myCircle">
    <text x="25" y="20">圆形</text>
    <circle cx="50" cy="50" r="20"/>
  </g>

  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

预定义`<defs>`

<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。

<svg width="300" height="100">
  <defs>
    <g id="myCircle">
      <text x="25" y="20">圆形</text>
      <circle cx="50" cy="50" r="20"/>
    </g>
  </defs>

  <use href="#myCircle" x="0" y="0" />
  <use href="#myCircle" x="100" y="0" fill="blue" />
  <use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>

`<pattern>`

<pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

<svg width="500" height="500">
  <defs>
    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle fill="#bee9e8" cx="50" cy="50" r="35" />
    </pattern>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>

上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。

图片`<image>`

标签用于插入图片文件。

属性	含义
`xlink:href`	文件来源
`width`	宽
`height`	高

<svg width="100" height="100">
  <image xlink:href="./_statics/images/logo.jpeg" width="50%" height="50%"/>
</svg>

动画`<animate>`

<animate>标签用于产生动画效果。

属性	含义
`attributeName`	发生动画效果的属性名
`from`	单次动画的初始值。
`to`	单次动画的结束值。
`dur`	单次动画的持续时间。
`repeatCount`	动画的循环模式。

动画`transform`变换`<animateTransform>`

<animate>标签对CSS的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签

<svg width="500px" height="500px">
  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
  </rect>
</svg>

上面代码中，的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

来源：https://www.cnblogs.com/fanlinqiang/p/11824918.html

标签

svg

贝塞尔

标签

直线`<line>`

折线`<polyline>`

圆`<circle>`

矩形`<rect>`

椭圆`<ellipse>`

路径`<path>`

文本`<text>`

复用`<use>`

多边形`<polygon>`

分组`<g>`

预定义`<defs>`

`<pattern>`

图片`<image>`

动画`<animate>`

动画`transform`变换`<animateTransform>`

SVG-标签

标签

直线<line>

折线<polyline>

圆<circle>

矩形<rect>

椭圆<ellipse>

路径<path>

文本<text>

复用<use>

多边形<polygon>

分组<g>

预定义<defs>

<pattern>

图片<image>

动画<animate>

动画transform变换<animateTransform>

直线`<line>`

折线`<polyline>`

圆`<circle>`

矩形`<rect>`

椭圆`<ellipse>`

路径`<path>`

文本`<text>`

复用`<use>`

多边形`<polygon>`

分组`<g>`

预定义`<defs>`

`<pattern>`

图片`<image>`

动画`<animate>`

动画`transform`变换`<animateTransform>`