SVG是什么標簽

SVG是是用來制作矢量圖的HTML5標簽，用來定義SVG圖形的容器。SVG可以繪制框、圓、路徑、圖形圖像。在使用SVG標簽的時候，可以將標簽添加到HTML body中，在為它添加對應的css樣式。

SVG 是是用來制作矢量圖的 HTML5 標簽，用來定義 SVG 圖形的容器。SVGg 可以繪制框、圓、路徑、圖形圖像。在使用 SVG 標簽的時候，可以將標簽添加到 html body 中，在為它添加對應的 css 樣式。

SVG 是什么

SVG 即 Scalable Vector Graphics，是一種用來繪制矢量圖的 HTML5 標簽。你只需定義好 XML 屬性，就能獲得一致的圖像元素。使用 SVG 之前先將標簽加入到 HTML body 中。就像其他的 HTML 標簽一樣，可以為 SVG 標簽為之添加 ID 屬性。SVG 支持 css,這一點有效的將圖形和樣式區分開。，例如“border-style:solid;border-width:2px;”。SVG 標簽跟其它的 HTML 標簽有通用的屬性。將 SVG 元素加入到 HTML 代碼中，SVG 提供很多繪圖形狀，例如線條、圓、多邊形等。

SVG 的應用

• 繪圖
• 動畫

SVG 標簽用法

SVG 元素可以通過、或者嵌入網頁之中，但是我們這里推薦使用,兼容性比較好。

SVG 標簽屬性

1. fill: 填充色 | url(id)這里主要是引用漸變色作為背景
2. stroke: 線條的顏色
3. stroke-width: 線條的寬度
4. stroke-linecap: 線條末尾的樣式 (默認)butt (圓角)round (方形)square ，round 和 square 會影響線條的長度
5. opacity: 不透明度 0~1
6. fill-rule: nonzero (非零環繞原則)evenodd
7. stroke-dasharray: 創建虛線數組 x,y,z,… (長度，間隔，長度，間隔，。。。。)
8. stroke-dashoffset: 偏移
9. filter: url(id) 添加濾鏡

clipPath-裁剪

能限制哪些地方可見，哪些地方不可見。標記指定的區域之外的所有內容都不會被顯示(圖像不會被繪制出來)。剪切路徑是用 clipPath 元素定義的，屬性 clip-path 可用來引用剪切路徑。默認情況下，一個形狀，其被剪切掉的區域（不可見的區域）是不響應鼠標事件的。

g-分組

g 標記就是’group’的簡寫，是用來分組用的，它能把多個元素放在一組里，對 g 標記實施的樣式和渲染會作用到這個分組內的所有元素上。組內的所有元素都會繼承 g 標記上的所有屬性。用定義的分組還可以使用 use 進行復制使用。