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

时间：2021-08-25 16:46:04

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

SVG基础以及使用Javascript DOM操作SVG的更多相关文章

  1. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  4. javascript DOM操作之 querySelector&comma;querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  5. JavaScript基础2---控制权DOM操作

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM将HTML文档呈现为带有元素,属性和文本的树结构(节点树). HTML文档可以说由节点构成的 ...

  6. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  7. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  8. 前端基础之BOM与DOM操作

    目录 BOM操作 navigator对象 screen对象 history对象 localtion对象 弹出框 计时 setTimeout() clearTimeout() setInterval() ...

  9. jQuery入门基础（事件、DOM操作）

    http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...

随机推荐

  1. SharePoint2016安装的过程的”Microsoft&period;SharePoint&period;Upgrade&period;SPUpgradeException”错误解决方法

    前提 在windows server 2012的服务器上运行安装sharepoint2016出现如下错误: Could not load file or assembly ‘Microsoft.Dat ...

  2. &lbrack;转&rsqb;C&plus;&plus;设计模式：Builder模式

    Builder模式要解决的问题是,当我们要创建很复杂的对象时,有时候需要将复杂对象的创建过程和这个对象的表示分离开来.由于在每一步的构造过程中可以映入不同参数,所以步骤相同但是最后的对象却不一样.也就 ...

  3. Objective-C、C&plus;&plus;和swift 的运行效率比较

    自己做iOS开发,以后慢慢都要转swift,前段时间看到网上的一个帖子,说swift的运行效率奇低,觉得自己有必要验证一下. 我用了一个最简单的加法运算,从0加到10000000,看三种语言的时耗. ...

  4. NOJ 1063 生活的烦恼

    描述 生活的暑假刚集训开始,他要决心学好字典树,二叉树,线段树和各种树,但生活在OJ上刷题的时候就遇到了一个特别烦恼的问题.那当然就是他最喜欢的二二叉树咯!题目是这样的:给你一颗非空的二叉树,然后再给 ...

  5. unity基本操作二

    一:error1,先断网再启动点击Manual Activation点击Save License生成相应的alf文件2,联网打开https://license.unity3d.com/manual上传 ...

  6. 使用AVCaptureSession捕捉静态图片

    #import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/ ...

  7. Ubuntu Server 14&period;04 下root无法ssh登陆

    今天安装了Ubuntu Server 14.04   在终端配置了root密码后,使用SecureCRT和putty竟然不能ssh登陆,SecureCRT一直提示密码不对,但是可以肯定输入的密码100 ...

  8. 计算两点间的距离&comma;hdu-2001

    计算两点间的距离 Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离.   Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1 ...

  9. QTableView

    QTableView常用于实现数据的表格显示.下面我们如何按步骤实现学生信息表格: 一 添加表头 //准备数据模型     QStandardItemModel *student_model = ne ...

  10. 【转】Python3—UnicodeEncodeError &&num;39&semi;ascii&&num;39&semi; codec can&&num;39&semi;t encode characters in position 0-1

    转自:https://blog.csdn.net/AckClinkz/article/details/78538462 环境 >>> import sys >>> ...

相关文章