欢迎来到[自学php网] ①群 287460651

主页 > 网站前端 > svg >

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

来源:未知    时间:2018-02-02 18:38 作者:小飞侠

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

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

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,很简单,花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,有了这个内联方式JavaScript就好控制得多了。


分组元素<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命名空间http://www.w3.org/2000/svg和一个idmain:

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

    

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


通过document.getElementById根据元素ID来获取这个容器对象

使用document.createElementNS创建一个带http://www.w3.org/2000/svg命名空间的矩形对象

使用element.setAttribute设置这个矩形对象的属性

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

代码:


<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>

获取元素高宽和坐标

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多次使用也不会覆盖上一个,而是从原来的事件上叠加。


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com