SVG基础以及使用Javascript DOM操作SVG

àì夳堔傛蜴生んèń 2022-09-22 13:53 331阅读 0赞

*  [简介][Link 1]
 *  [在HTML中使用SVG][HTML_SVG]
    
     *  [分组元素<g>][g]
        
         *  [解决text文本排版问题][text]
 *  [通过Javascript DOM控制SVG][Javascript DOM_SVG]
    
     *  [设置文本][Link 2]
     *  [获取元素高宽和坐标][Link 3]
     *  [事件处理][Link 4]
     *  [自定义的z-index层级属性][z-index]
     *  [更多DOM API][DOM API]
     *  [为什么不使用jQuery？][jQuery]

## 简介 ##

首先要明白SVG是基于XML格式定义图像的一种技术，并且是矢量的，也就是说在不同分辨率下都显示得很好。想到这里，有人会想起Canvas这东西，它跟SVG有什么不同？

下面是W3SCHOOL给出的对比：

**SVG**

*  不依赖分辨率
 *  支持事件处理器
 *  最适合带有大型渲染区域的应用程序（比如谷歌地图）
 *  复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
 *  不适合游戏应用

**Canvas**

*  依赖分辨率
 *  不支持事件处理器
 *  弱的文本渲染能力
 *  能够以 .png 或 .jpg 格式保存结果图像
 *  最适合图像密集型的游戏，其中的许多对象会被频繁重绘

大概就是这样，如果你要使用SVG，应该考虑是否更应该采用Canvas，并且还需要知道并不是所有浏览器都支持它，IE8或以下就不支持SVG，除此以外的现代浏览器包括IE9+基本都支持。IE它有自己的一套方案：VML，这个你自己去搜索相关资料。另外也可以通过安装插件使得其支持SVG，比如adobe出品的svg viewer。

## 在HTML中使用SVG ##

基础部分看W3SCHOOL的教程：[http://www.w3school.com.cn/svg/index.asp][http_www.w3school.com.cn_svg_index.asp]，很简单，花30分钟就可以扫完。

特别要注意[SVG in HTML][]部分，它介绍了如何在HTML中使用SVG，可能会比较麻烦，庆幸的是在支持HTML5的浏览器中，可以直接创建SVG标签：

这种方式称为`内联SVG`，有了这个内联方式javascript就好控制得多了。

### 分组元素<g> ###

g元素可以对多个元素进行分组，使其更具语义化，并且方便对分组里的元素进行统一处理，比如样式、动画等。

#### 解决text文本排版问题 ####

在SVG中对文本排版比较头疼，你不能像HTML那样轻易的把文本放到一个“矩形容器”（比如DIV）里，因为那些标签都是封闭的（在开始标签中进行关闭）。简单的做法是把文字和矩形设定到相近的坐标中，使其看起来是“一起的”（难道这就是世界上最遥远的距离？）：

<rect x="10" y="10" width="100" height="40" style="fill:rgb(255,255,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    <text x="35" y="35" font-size="16" style="fill:rgb(0,0,0);">text</text>;

效果：  
![QQ截图20140811155954.png][QQ_20140811155954.png]

显然这种方式是很难管理，当我想更换一个位置的时候，我必需把矩形和文本的位置都进行调整，现在只有两个元素还好说，一旦多起来，那简直就是噩梦。而g元素可以帮我们解决这个问题。

先把它们都放到一个g元素里，这样里面所有元素的位置都是相对于这个g元素的，通过更改g元素的位置，可以达到调整整个分组的位置的效果。但需要通过transform才能有效，而不是x和y：

现在矩形和文本的x和y轴都是相对于g的位置而言的，`translate(50,50)`表示 x="50", y="50" 这样应该很好理解吧？

## 通过Javascript DOM控制SVG ##

页面上已经存在一个SVG容器，这个容器带有带有一个XML命名空间`http://www.w3.org/2000/svg`和一个id`main`：

下面我们使用一系列的DOM方法在容器里添加一个矩形：

*  通过`document.getElementById`根据`元素ID`来`获取`这个容器对象
 *  使用`document.createElementNS``创建`一个带`http://www.w3.org/2000/svg`命名空间的矩形对象
 *  使用`element.setAttribute`设置这个矩形对象的`属性`
 *  使用`element.appendChild`把它`添加`到容器里

代码：

效果  
![QQ截图20140811152842.png][QQ_20140811152842.png]

### 设置文本 ###

`textContent属性`可以获取和设置text元素文本：

// SVG
    <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
    
    // JS
    <script> var text = document.getElementById( "text" ); console.log( text.textContent ); // foo text.textContent = "Hello world!"; // 重新设置文本 </script>

### 获取元素高宽和坐标 ###

`getBBox方法`可以获取所有元素的高宽和坐标：

// SVG
    <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
    
    // JS
    <script> var text = document.getElementById( "text" ); console.log( text.getBBox() ); // {height: 16, width: 32, y: 11, x: 25} </script>

### 事件处理 ###

SVG也可以像HTML那样为元素添加自定义事件。  
使用`on + 事件名`属性监听：

// SVG
    <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
    
    // JS
    <script> var text = document.getElementById( "text" ); // 点击文本时弹出其内容 text.onclick = function() { alert( this.textContent ); }; </script>

也可以使用`element.addEventListener`方法监听：

// SVG
    <text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
    
    // JS
    <script> var text = document.getElementById( "text" ); // 点击文本时弹出其内容 // 事件名前面不带on text.addEventListener( 'click', function() { alert( this.textContent ); } ); </script>

两种方法有什么不同？`on + 事件名`属性只能为同一个事件添加一个处理方法，再对这个属性进行设置时会覆盖掉上一个方法，而`element.addEventListener`多次使用也不会覆盖上一个，而是从原来的事件上叠加。

### 自定义的z-index层级属性 ###

在SVG中，怎样定义每个元素的层级关系？比如我想把一个圆形叠在矩形上。这是大多数人会遇到的问题，事实上SVG是按元素的书写顺序进行堆叠的，就是说后面的元素会叠在前面的元素上，并且没有相关属性进行设置。这使得层级的控制变得不那么灵活，但是可以通过Javascript DOM增加一个自定义的层级属性`z-index`，当然逻辑还是要靠我们自己去处理，先看SVG代码：

不加任何处理的效果：

![QQ截图20140811182004.png][QQ_20140811182004.png]

可以看到text2文本出来了，但挡住了text1，并且text1也被所在的矩形挡住了，连文本也显示不出来，此时的z-index毫无作用（因为是我自己定义的属性）。于是乎，我使用下面的JS代码对其进行处理：

效果：  
![QQ截图20140811180021.png][QQ_20140811180021.png]

经JS处理后的SVG代码：

可以看到元素都按照我们定义的z-index的值进行排列并显示。如果你还不怎么明白，你可以继续了解更多的DOM API。

[Link 1]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_1
[HTML_SVG]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_2
[g]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_3
[text]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_4
[Javascript DOM_SVG]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_5
[Link 2]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_6
[Link 3]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_7
[Link 4]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_8
[z-index]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_9
[DOM API]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_10
[jQuery]: http://melondeng.com/browser/javascript_control_the_svg_in_html.html#menu_index_11
[http_www.w3school.com.cn_svg_index.asp]: http://www.w3school.com.cn/svg/index.asp
[SVG in HTML]: http://www.w3school.com.cn/svg/svg_inhtml.asp
[QQ_20140811155954.png]: http://blog.melonol.com/usr/uploads/2014/08/2583811205.png
[QQ_20140811152842.png]: http://blog.melonol.com/usr/uploads/2014/08/804216584.png
[QQ_20140811182004.png]: http://blog.melonol.com/usr/uploads/2014/08/2216596682.png
[QQ_20140811180021.png]: http://blog.melonol.com/usr/uploads/2014/08/1062318339.png