SVG

不依賴分辨率

支持事件處理器

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

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

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

Canvas

依賴分辨率

不支持事件處理器

弱的文本渲染能力

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

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

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

在HTML中使用SVG

特別要注意SVG in HTML部分，它介紹了如何在HTML中使用SVG，可能會比較麻煩，慶幸的是在支持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元素可以對多個(gè)元素進(jìn)行分組，使其更具語義化，并且方便對分組里的元素進(jìn)行統(tǒng)一處理，比如樣式、動(dòng)畫等。

解決text文本排版問題

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

text;

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

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

text;

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

通過Javascript DOM控制SVG

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

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

通過document.getElementById根據(jù)元素ID來獲取這個(gè)容器對象

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

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

使用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è)處理方法，再對這個(gè)屬性進(jìn)行設(shè)置時(shí)會覆蓋掉上一個(gè)方法，而element.addEventListener多次使用也不會覆蓋上一個(gè)，而是從原來的事件上疊加。

總結(jié)

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

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