svg系列–基礎
這里會總結svg的基礎知識和一些經典的案例。
svg簡介
SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics. 這是MDN英文文檔對svg的介紹。 svg支持css,這一點有效的將圖形和樣式區分開。 svg的應用： 1、繪圖 2、動畫 如何在網頁中引用svg元素
svg元素可以通過<embed>、<object>或者<iframe>嵌入網頁之中，但是我們這里推薦使用<embed>, 兼容性比較好。 <embed src="circle.svg" type="image/svg+xml" />
<svg width="" height="">繪制的內容</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) 添加濾鏡
繪制矩形
--------- 矩形 ---------
<rect x="" y="" rx="" ry="" width="" height=""></rect>
(x, y): 左上角坐標 rx: x軸圓角半徑 ry: y軸圓角半徑 width: 長度 height: 高度
繪制圓
--------- 圓 ---------
<circle cx="" cy="" r=""></circle>
(cx, cy): 圓心 r: 半徑
繪制橢圓
-------------- 橢圓 --------------
<ellipse cx="" cy="" rx="" ry=""></ellipse>
(cx, cy): 中心點 rx: x軸半徑 ry: y軸半徑
繪制線條
-------- 線條 --------
<line x1="" y1="" x2="" y2=""></line>
(x1, y1): 線條的起始點 (x2, y2): 線條的結束點
繪制多邊形
--------------- 多邊形polygon ---------------
<polygon points=""></polygon>
points: x,y x1,y1 ........
繪制曲線
---------------- 曲線polyline ----------------
<polyline points=""></polyline>
points: x,y x1,y1 .........
繪制路徑
--------------- 路徑 ---------------
<path d=""></path>
d: 路徑的描述 主要的語法： M： moveTo L: lineTo H: horizontal lineTo V: vertical lineTo C: curveto S: smooth curveto Q: quadratic Bézier curve T: smooth quadratic Bézier curveto A: elliptical Arc Z: closepath 命令區分大小寫，除了Z。大寫表示絕對位置，小寫表示相對位置
。 繪制文本
--------------- 繪制文本 ---------------
<text x="" y="" text-anchor="" dx="" dy="">text</text>
(x, y): 文字左下角的起始坐標 text-anchor: start middle end 文本錨點(可能會和我們預期的坐標有出入) dx: 橫軸的偏移 dy: 縱軸的偏移 路徑文本的繪制 <textPath xlink:href="#path">text</textPath>
<text>中還可以嵌套<tspan x="" y="">text</tspan>
同時文本也可以作為超鏈接 <a xlink:href="" target="">
<text></text>
</a>
濾鏡的使用
----------------- 濾鏡 -----------------
<filter id=""></filter>
漸變
-------------- 漸變 -------------- 線性漸變 <linearGradient x1="" y1="" x2="" y2="" gradientUnits>
<stop offset="" style="stop-color:;stop-opacity:;"></stop>
</linearGradient>
gradientUnits: 定義坐標 userSpaceOnUse(不會對pattern的單位進行縮放) | objectBoundingBox(會) x1: 漸變開始橫坐標 y1: 漸變開始縱坐標 x2: 漸變結束橫坐標 y2: 漸變結束縱坐標 offset: 漸變開始的位置 0% - 100% 放射性漸變 <radialGradient cx="" cy="" r="" fx="" fy="" gradientUnits>
<stop offset="" style="stop-color:;stop-opacity:;"></stop>
</radialGradient>
gradientUnits: 定義坐標 userSpaceOnUse(不會對pattern的單位進行縮放) | objectBoundingBox(會) cx: 外層圓心橫坐標 cy: 外層圓心縱坐標 fx: 內層圓心橫坐標 fy: 內層圓心縱坐標 r: 發散的半徑 offset: 漸變開始的位置 0% - 100%
常用的幾個標簽
---------- 裁剪 ----------
<clipPath id="">裁剪路徑</clipPath>
---------- 引用元素 ----------
<defs>聲明引用元素</defs>
---------- 拷貝 ----------
<use x="" y="" width="" height="" xlink:href="id"></use>
(x, y): 克隆對象的左上角坐標 width: 克隆對象的寬度 height: 克隆對象的高度 xlink:href 引用克隆對象 ---------- 模式 ----------
<pattern id="" width="" height="" patternUnits="" patternTransform="">模式內的形狀</pattern>
width: 模式的寬度 height: 模式的高度 patternUnits: 定義pattern的坐標系統 userSpaceOnUse(不會對pattern的單位進行縮放) | objectBoundingBox(會) patternTransform: 變換 ---------- 遮罩 ----------
<mask maskUnits="" x='' y="" width="" height="">內容</mask>
(x, y): 裁剪的左上角坐標。 width: 裁剪的寬度 height: 裁剪的高度
CSS3中的svg的影子
--------------------- clip-path 裁剪 --------------------- clip-path: 第一種: url(id) 配合svg的<clipPath> 第二種: polygon(x y,x1 y1,x2 y2,.......) 第三種：inset(top right bottom left round rt rr rb rl) 圓角矩形 這里比較重要的一點就是polygon的過渡動畫必須要求各個狀態的點的個數一樣