背景
最近在做需求時，設計給的是 svg 的，但是因為定位麻煩，我轉(zhuǎn)成了 png，結(jié)果被說變模糊了。無奈只能使用 svg。使用SVG過程中，遇到了一些問題，正好學習分享一下。
普遍認識：
- SVG 是矢量的，也就是放大不模糊，不失真。
- 一般用作網(wǎng)絡中的圖標。
SVG
- 是用 XML 描述的一種規(guī)范。
HTML 與 XML
HTML： 超文本標記語言。預定義標記（標簽）。
XML：可擴展標記語言，可用來定義其他標記語言。沒有固定標記。
例子：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle x=10 y=10 cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
- 類似于 HTML，有元素（標簽）和屬性。
SVG 里區(qū)分大小寫
SVG 里屬性值必須要引號，包括數(shù)字
- 定位依靠元素的
x、y屬性
基本元素
- 矩形
rect - 圓
circle - 橢圓
ellipse - 線
line - 折線
polygon - 多邊形
polyline - 路徑
path - 字形
glyph，類似與 path
常見屬性
svg 以左上角為 x =0，y=0
-
x- x 位置 -
y- y 位置 -
cx- 橢圓圓心 x -
cy- 橢圓圓心 y -
rx、ry- 圓角，rx 為 x 的方向弧度，ry 為 y方向弧度 widthheightfillfill-opacitystrokestroke-opacitystyle-
points- 定義折線和多邊形點 -
d- 路徑特有的屬性，是一個命令+參數(shù)的序列
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
d 屬性
參數(shù)都是 x y 的格式，根據(jù)前邊命令表示的意思有些出入。
大寫字母命令后邊的參數(shù)表示絕對位置，小寫字母命令后的參數(shù)表示相對位置。
m 10 10
M 10 10
- M - move to - 只移動不繪制
- L - line to - 移動加繪制
- H - 只有一個參數(shù) x - 繪制水平線
- V - 只有一個參數(shù) y - 繪制垂直線
- Z(z) - 沒有參數(shù) - 繪制一條線到起始點
- C - 貝塞爾曲線 - 三個參樹 - 起點控制點、終點控制點、終點
- S - 也是貝塞爾曲線 - 兩個參數(shù) - 如果S命令跟在一個C或S命令后面，則它的第一個控制點會被假設成前一個命令曲線的第二個控制點的中心對稱點。如果S命令單獨使用，前面沒有C或S命令，那當前點將作為第一個控制點
- Q - 二次貝塞爾曲線 - 兩個參數(shù) - 控制點、終點
- T - 二次貝塞爾曲線 - 一個參數(shù) - 終點
- A - 弧形 - 七個參數(shù) -
// 弧形單獨寫明
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx、ry 弧度
x-axis-rotation: 旋轉(zhuǎn)情況（順時針，可為負）
large-arc-flag: 決定弧線是大于還是小于180度，0表示小角度弧，1表示大角度弧
sweep-flag: 弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧
x、y 終點坐標
// 繪制一個矩形的例子
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
<path d="M10 10 H 90 V 90 H 10 Z" />
<path d="M10 10 h 80 v 80 h -80 Z" />
引入方式
- 在 HTML 中直接書寫 <svg> 標簽
<svg style="height: 100px; width: 100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" rx="20" ry="30" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
svg 標簽上的樣式定義內(nèi)部的元素
元素的樣式具有最高優(yōu)先級
聲明樣式塊：
<defs>
<style type="text/css">
#MyRect {
stroke: black;
fill: red;
}
</style>
</defs>
不支持 css 中的偽類、漸變
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]></style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
- 使用 <embed> 標簽
<embed style="fill: #409eff" src="test.svg" type="image/svg+xml" />
無法通過外部標簽 style 樣式控制 svg
上邊 style 的 fill 屬性并不能生效
大?。?/p>
- 如果加載的 svg 文件內(nèi) svg 未指定大小，默認 300 * 150
- 如果置頂了大小，則為實際大小
可按照 inline-block 處理
默認無 border
- 使用
<iframe>標簽
<iframe src="image.svg"></iframe>
滿足 iframe 特性
同樣無法通過 style 樣式控制 svg
大小默認 iframe 大小 300 * 150（+ border）
- 使用 <object>
<object data="image.svg" type="image/svg+xml" />
表現(xiàn)類似與使用 <embed> 相同
SVG 常見用途
unicode 圖標
利用的是 unicode 編碼中預留的部分編碼，自定義字體。
<font id="fontdemo" horiz-adv-x="1000">
<font-face
font-family="fontdemo"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896" // 上基線
descent="-128" // 下基線
/>
<missing-glyph />
<glyph glyph-name="info-circle-fill" unicode="" d="M512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m32-664c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8V440c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-272z m-32 344c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z" horiz-adv-x="1024" />
</font>
@font-face {
font-family: "iconfont";
/* IE9 */
src: url('iconfont.eot?t=1594289303932');
src:
/* IE6-IE8 */
url('iconfont.eot?t=1594289303932#iefix') format('embedded-opentype'),
url('data:application/x-font-woff2;charset=utf-8;base64,') format('woff2'),
url('iconfont.woff?t=1594289303932') format('woff'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.ttf?t=1594289303932') format('truetype'),
/* iOS 4.1- */
url('iconfont.svg?t=1594289303932#iconfont') format('svg');
}
使用 @font-face 自定義字體，然后在要使用的 HTML 標簽中設定字體即可。
