SVG

不依賴分辨率

支持事件處理器

最適合帶有大型渲染區(qū)域的應(yīng)用程序(比如谷歌地圖)

復(fù)雜度高會(huì)減慢渲染速度(任何過(guò)度使用 DOM 的應(yīng)用都不快)

不適合游戲應(yīng)用

Canvas

依賴分辨率

不支持事件處理器

弱的文本渲染能力

能夠以 .png 或 .jpg 格式保存結(jié)果圖像

最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪

大概就是這樣，如果你要使用SVG，應(yīng)該考慮是否更應(yīng)該采用Canvas，并且還需要知道并不是所有瀏覽器都支持它，IE8或以下就不支持SVG，除此以外的現(xiàn)代瀏覽器包括IE9+基本都支持。IE它有自己的一套方案：VML，這個(gè)你自己去搜索相關(guān)資料。另外也可以通過(guò)安裝插件使得其支持SVG，比如adobe出品的svg viewer。

在HTML中使用SVG

特別要注意SVG in HTML部分，它介紹了如何在HTML中使用SVG，可能會(huì)比較麻煩，慶幸的是在支持HTML5的瀏覽器中，可以直接創(chuàng)建SVG標(biāo)簽：

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

這種方式稱為內(nèi)聯(lián)SVG，有了這個(gè)內(nèi)聯(lián)方式JavaScript就好控制得多了。

分組元素

g元素可以對(duì)多個(gè)元素進(jìn)行分組，使其更具語(yǔ)義化，并且方便對(duì)分組里的元素進(jìn)行統(tǒng)一處理，比如樣式、動(dòng)畫等。

解決text文本排版問(wèn)題

在SVG中對(duì)文本排版比較頭疼，你不能像HTML那樣輕易的把文本放到一個(gè)“矩形容器”(比如DIV)里，因?yàn)槟切?biāo)簽都是封閉的(在開始標(biāo)簽中進(jìn)行關(guān)閉)。簡(jiǎn)單的做法是把文字和矩形設(shè)定到相近的坐標(biāo)中，使其看起來(lái)是“一起的”(難道這就是世界上最遙遠(yuǎn)的距離？)：

text;

顯然這種方式是很難管理，當(dāng)我想更換一個(gè)位置的時(shí)候，我必需把矩形和文本的位置都進(jìn)行調(diào)整，現(xiàn)在只有兩個(gè)元素還好說(shuō)，一旦多起來(lái)，那簡(jiǎn)直就是噩夢(mèng)。而g元素可以幫我們解決這個(gè)問(wèn)題。

先把它們都放到一個(gè)g元素里，這樣里面所有元素的位置都是相對(duì)于這個(gè)g元素的，通過(guò)更改g元素的位置，可以達(dá)到調(diào)整整個(gè)分組的位置的效果。但需要通過(guò)transform才能有效，而不是x和y：

text;

現(xiàn)在矩形和文本的x和y軸都是相對(duì)于g的位置而言的，translate(50,50)表示 x="50", y="50" 這樣應(yīng)該很好理解吧？

通過(guò)Javascript DOM控制SVG

頁(yè)面上已經(jīng)存在一個(gè)SVG容器，這個(gè)容器帶有帶有一個(gè)XML命名空間http://www.w3.org/2000/svg和一個(gè)idmain：

下面我們使用一系列的DOM方法在容器里添加一個(gè)矩形：

通過(guò)document.getElementById根據(jù)元素ID來(lái)獲取這個(gè)容器對(duì)象

使用document.createElementNS創(chuàng)建一個(gè)帶http://www.w3.org/2000/svg命名空間的矩形對(duì)象

使用element.setAttribute設(shè)置這個(gè)矩形對(duì)象的屬性

使用element.appendChild把它添加到容器里

代碼：

var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );

rect.setAttribute( "width", 100 );

rect.setAttribute( "height", 30 );

rect.setAttribute( "style", "fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" );

main.appendChild( rect );

設(shè)置文本

textContent屬性可以獲取和設(shè)置text元素文本：

// SVG

foo;

// JS

console.log( text.textContent ); // foo

text.textContent = "Hello world!"; // 重新設(shè)置文本

獲取元素高寬和坐標(biāo)

getBBox方法可以獲取所有元素的高寬和坐標(biāo)：

// SVG

foo;

// JS

console.log( text.getBBox() ); // {height: 16, width: 32, y: 11, x: 25}

事件處理

SVG也可以像HTML那樣為元素添加自定義事件。

使用on + 事件名屬性監(jiān)聽：

// SVG

foo;

// JS

// 點(diǎn)擊文本時(shí)彈出其內(nèi)容

text.onclick = function() {

alert( this.textContent );

};

也可以使用element.addEventListener方法監(jiān)聽：

// SVG

foo;

// JS

// 點(diǎn)擊文本時(shí)彈出其內(nèi)容

// 事件名前面不帶on

text.addEventListener( 'click', function() {

alert( this.textContent );

} );

兩種方法有什么不同？on + 事件名屬性只能為同一個(gè)事件添加一個(gè)處理方法，再對(duì)這個(gè)屬性進(jìn)行設(shè)置時(shí)會(huì)覆蓋掉上一個(gè)方法，而element.addEventListener多次使用也不會(huì)覆蓋上一個(gè)，而是從原來(lái)的事件上疊加。

總結(jié)

以上是生活随笔為你收集整理的java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。