SVG 研究之路(14) - 控制SVG 的注意事項
學會如何繪製SVG 不稀奇,厲害的是學會如何利用JS 和CSS 去控制SVG,以下將介紹兩個要注意的小地方,這也是我自己在學習的過程中所遇到的問題,搞懂這兩個小眉角,對於控制SVG 一定就會更得心應手。( 當然後續還會有不同的小技巧,不過就等我寫到了再一起分享吧! )
第一、使用CSS控制SVG:
或許很多人會有疑問,爲什麼CSS裏頭沒有fill或stroke這些類型的控制屬性,我們卻能使用CSS來直接修改SVG的fill或stroke呢?因爲SVG規範將屬性區分成properties和其他attributes,前者是可以用CSS設置的,後者不能。可以參考W3C的SVG規範:properties可以使用CSS控制和attributes不能使用CSS控制。
第二、使用jQuery或javascript控制SVG:
我自己有一次要嘗試直接用innerHTML或append的方式,要在SVG內動態新增或等元素,結果發現雖然最後的結果有產生程式碼,但在瀏覽器上就是不會顯示,一開始花了很多時間以爲是自己程式寫錯,後來才知道,因爲瀏覽器對於innerHTML或append等方式解析出來的都是在HTML的命名空間,並不是SVG的命名空間,換句話說,SVG是一個xmlns而並非HTML元素,因此瀏覽器無法解析或在SVG的命名空間,也因此使用innerHTML或jQuery所提供的append、HTML方式都是會失敗的。(參考這篇文章 )
不過仍有方式可以讓我們動態放入我們要的程式碼並且順利運行,也就是使用createElementNS來進行轉換,如此一來便可以動態的新增元素進入SVG了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
</script>
</body>
</html>