CSS也可以使用svg
.logo {
background: url(logo.svg);
}SVG 文件還可以轉(zhuǎn)為 BASE64 編碼，然后作為 Data URI 寫入網(wǎng)頁。
SVG的語法
1.
SVG 代碼都放在頂層標(biāo)簽
如果只想展示 SVG 圖像的一部分，就要指定viewBox屬性。
注意，視口必須適配所在的空間。上面代碼中，視口的大小是 50 x 50，由于 SVG 圖像的大小是 100 x 100，所以視口會(huì)放大去適配 SVG 圖像的大小，即放大了四倍。
如果不指定width屬性和height屬性，只指定viewBox屬性，則相當(dāng)于只給定 SVG 圖像的長寬比。這時(shí)，SVG 圖像的默認(rèn)大小將等于所在的 HTML 元素的大小。
2.
上面的代碼定義了三個(gè)圓。
class屬性用來指定對(duì)應(yīng)的 CSS 類。
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}SVG 的 CSS 屬性與網(wǎng)頁元素有所不同。
fill：填充色
stroke：描邊色
stroke-width：邊框?qū)挾?/p>
3.
上面代碼中，標(biāo)簽的x1屬性和y1屬性，表示線段起點(diǎn)的橫坐標(biāo)和縱坐標(biāo)；x2屬性和y2屬性，表示線段終點(diǎn)的橫坐標(biāo)和縱坐標(biāo)；style屬性表示線段的樣式。
4.
5.
6.
7.
8.
M：移動(dòng)到（moveto）
L：畫直線到（lineto）
Z：閉合路徑
9.
肆客足球
10.
11.
圓形
12.
圓形
13.
上面代碼中，patternUnits="userSpaceOnUse"表示
14.
上面代碼中，xlink:href屬性表示圖像的來源。
15.
上面代碼中，矩形會(huì)不斷移動(dòng)，產(chǎn)生動(dòng)畫效果。
attributeName：發(fā)生動(dòng)畫效果的屬性名。
from：單次動(dòng)畫的初始值。
to：單次動(dòng)畫的結(jié)束值。
dur：單次動(dòng)畫的持續(xù)時(shí)間。
repeatCount：動(dòng)畫的循環(huán)模式。
可以在多個(gè)屬性上面定義動(dòng)畫。
16.
上面代碼中，
JavaScript 操作SVG
1. DOM操作
如果 SVG 代碼直接寫在 HTML 網(wǎng)頁之中，它就成為網(wǎng)頁 DOM 的一部分，可以直接用 DOM 操作。
上面代碼插入網(wǎng)頁之后，就可以用 CSS 定制樣式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #f8f8f8;
}然后，可以用 JavaScript 代碼操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);上面代碼指定，如果點(diǎn)擊圖形，就改寫circle元素的r屬性。
2. 獲取 SVG DOM
使用
重慶分公司
重慶分公司