1、标簽
功能：頂層标簽，svg代碼都放在
<svg>
之中
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
...
</svg> ----------------
公共屬性
----------------
fill: 填充色 | url(id)這裡主要是引用漸變色作為背景
stroke: 線條的顔色
stroke-width: 線條的寬度
stroke-linecap: 線條末尾的樣式 (預設)butt (圓角)round (方形)square ----- round和square會影響線條的長度
opacity: 不透明度 0~1
fill-rule: nonzero (非零環繞原則)evenodd
stroke-dasharray: 建立虛線數組 x,y,z,..... (長度，間隔，長度，間隔，。。。。)
stroke-dashoffset: 偏移
filter: url(id) 2、标簽
功能：該标簽代表圓形，cx、cy是圓心，r是半價
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="50" />
</svg> 3、标簽
功能：該标簽用來繪制直線，x1、y1是起點坐标，x2、y2是終點坐标
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="0"style="stroke:rgb(0,0,0); stroke-width:5" />
</svg> 4、
标簽
功能：該标簽用于繪制折線，point指定了每個端點的坐标，橫、縱坐标之間用逗号分隔，點與點之間用空格分隔
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg> 5、标簽
功能：該标簽用于繪制矩形，x、y指定了矩形左上端點，width、height指定了寬度和高度
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100"style="stroke:#70d5dd; fill:#dd524b" />
</svg> 6、标簽
功能：該标簽用于繪制橢圓，cx、cy指定了橢圓中心坐标，rx、ry指定了橢圓橫向軸和縱向軸的半價
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="60" cy="60" rx="20" ry="40" stroke="black" stroke-width="5" fill="silver" />
</svg> 7、
标簽
功能：該标簽用于繪制多邊形，points指定了每個端點的坐标，橫、縱之間逗号分隔，點與點之間用空格分隔
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0" />
</svg> 8、
标簽
功能：該标簽用于繪制路徑，d屬性表示繪制順序，它的值是一個長字元串，每個字母表示一個繪制動作，後面跟着坐标
- M：移動到（moveTo）
- L：畫線到（lineTo）
- H：水準線，水準方向畫多長;
- V：垂直線，垂直方向畫多長;
- C：曲線
- S：平滑曲線
- Q：貝塞爾曲線
- T：平滑貝塞爾曲線
- A：弧
- Z：閉合路徑
指令區分大小寫，除了Z，大寫表示絕對位置，小寫表示相對位置。
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<path d="
M 18,3
L 46,3
L 46,40
Z ">
</path>
</svg> 9、标簽
功能：該标簽用于繪制文本，x、y表示文本區塊基線起點坐标
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="25"> Hello World </text>
</svg> 10、标簽
功能：該标簽用于複制一個形狀，href屬性指定所要複制的節點，x、y是
<use>
左上角的坐标，另外可指定width和height
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="50" />
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg> 11、标簽
功能：該标簽用于将多個形狀組成一個組，友善複用
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<g id="myCircle">
<text x="25" y="20"> 圓形 </text>
<circle cx="50" cy="50" r="20" />
</g>
</svg> 12、标簽
功能：該标簽用于自定義形狀，它内部的代碼不會顯示，僅供引用
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
...
</defs>
</svg> 13、
标簽
功能：該标簽用于自定義一個形狀，該形狀可以被引用來平鋪一個區域
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<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> 14、标簽
功能：該标簽用于插入圖檔檔案，xlink:href屬性表示圖像資源
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<image xlink:href="path/to/image.jpg" width="50%" height="50%" />
</svg> 15、标簽
- attributeName: 發生動畫效果的屬性名
- attributeType: 指定目标屬性和它相對應的值處于哪個命名空間裡 值 css | xml | auto
- from: 單次動畫的初始值
- to: 單次動畫的結束值
- dur：單次動畫的持續時間
- repeatCount: 動畫的循環次數
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="30" height="30" fill="green">
<animate attributeType="XML"
attributeName="y"
from="50" to="100"
dur="1s"
repeatCount="indefinite"/>
</rect>
<circle cx="240" cy="100" r="50" fill="#2315ff">
<animate attributeType="CSS"
attributeName="fill"
values="orange;#4ed8a1;#a2d8d5"
dur="5s"
repeatCount="indefinite"/>
</circle>
</svg> ![sqli-labs第一關--報錯注入練習[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)