HTML5技术

SVG基础以及使用Javascript DOM操作SVG - 管的宽

字号+ 作者:H5之家 来源:H5之家 2017-01-14 11:00 我要评论( )

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

SVG

Canvas

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

在HTML中使用SVG

基础部分看W3SCHOOL的教程:,很简单,花30分钟就可以扫完。

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

<html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> </body> </html>

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

分组元素<g>

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

<g> <rect x="10" y="10" width="40" height="40" ry="10"/> <rect x="80" y="80" width="40" height="40" ry="10"/> <rect x="150" y="150" width="40" height="40" ry="10"/> </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>;

 

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

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

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

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

通过Javascript DOM控制SVG

页面上已经存在一个SVG容器,这个容器带有带有一个XML命名空间和一个idmain:

<svg xmlns="http://www.w3.org/2000/svg" id="main" version="1.1" height="200"></svg>

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

代码:

<script> var main = document.getElementById( "main" ); 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 ); </script> 设置文本

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> 获取元素高宽和坐标

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应) - h

    使用div模拟textarea,实现文本输入框高度自适应(附:js控制textare

    2017-01-12 12:10

  • 使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性能优化 - 乔克灬叔叔

    使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性

    2017-01-08 09:00

  • 28个你必须知道的HTML5的新特性,技巧以及技术 - Sanplit

    28个你必须知道的HTML5的新特性,技巧以及技术 - Sanplit

    2017-01-05 08:00

  • Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    2016-12-17 10:01

网友点评
>