SVG-標簽

標簽

直線<line>

<line> 標簽用來創建線條。

屬性	含義
x1	屬性在 x 軸定義線條的開始
y1	屬性在 y 軸定義線條的開始
x2	屬性在 x 軸定義線條的結束
y2	屬性在 y 軸定義線條的結束

折線<polyline>

<polyline> 標簽用來創建僅包含直線的形狀。

屬性	含義
points	指定了每個端點的坐標，橫坐標與縱坐標之間與逗號分隔，點與點之間用空格分隔

<svg width="100" height="50">
  <polyline stroke="red" fill="black" stroke-width="2" points="0,0 10,10 20,10 100,50"/>
</svg>

圓<circle>

屬性	含義
cx	圓心x軸坐標
cy	圓心y軸坐標
r	半徑

<svg width="100" height="50">
  <circle cx="50"  cy="25" r="25" />
</svg>

矩形<rect>

標簽可用來創建矩形，以及矩形的變種。

屬性	含義
x	左上角x軸坐標，默認值為0
y	左上角y軸坐標，默認值為0
width	寬
height	高
rx	圓角弧度
ry	圓角弧度

<svg width="100" height="50">
  <rect width="100" height="50" rx="10" ry="20"/>
</svg>

橢圓<ellipse>

<ellipse> 標簽可用來創建橢圓。橢圓與圓很相似。不同之處在於橢圓有不同的 x 和 y 半徑，而圓的 x 和 y 半徑是相同的。

屬性	含義
cx	圓心x軸坐標
cy	圓心y軸坐標
rx	水平半徑
ry	垂直半徑

<svg width="100" height="50">
  <ellipse cx="50" cy="25" rx="50" ry="25"/>
</svg>

路徑<path>

<path> 標簽用來定義路徑。MDN 詳解

屬性	含義
d	表示繪制順序，它的值是一個長字符串，每個字母表示一個繪制動作，后面跟着坐標。

支持繪制的動作包括：

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/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)旋轉。