svg入门：使用js去操作svg图像

来源：互联网发布：冯大辉离职知乎编辑：程序博客网时间：2024/04/27 13:16

svg是一种开放标准的矢量图形语言，是可缩放的矢量图形格式。svg格式的图像可任意放大图形显示，而且边缘异常清晰，生成的文件很小，方便传输，文字在svg图像中保留可编辑和可搜寻的状态，没有字体的限制，所以十分适合用于设计高分辨率的Web图形页面。

svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看。使用svg格式可让你设计激动人心的、高分辨率的Web图形页面。

svg格式具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。

简单来说就是既可以当图片来显示，又可以当作文字来显示，而且他的大小比起png，jpg又小得多

至于为什么要用svg，理由也是多种多样，有时候感觉很重要，像我，喜欢上svg，只是因为看到一幅svg版的中国地图。
//myfirst.svg

效果如下：

这效果也没什么。是的

接下来是我们的html文件：

index.html:

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>

   <body>
       
       
       <button id="clickme">clickme</button>
       <object id="myobject" data="myfirst.svg"></object>
       <script src="a.js"></script>
   </body>

</html>

其中有a。js文件，那么久上文件：

a.js

document.getElementById("clickme").addEventListener("click", function() {
//以下是在js中操作svg的方法
document.getElementById("myobject").getSVGDocument().getElementById("myrect").setAttribute("fill", "yellow");
});

a。js提供了使用svg节点的方法，对了，由于我改动过东西，所以会报错，你们在svg文件的recr中加个id就可以了

至于怎么去绘制svg图像，这个我建议大家去w3c好好学习

阅读全文

1 0