JavaScript操作SVG 提高篇

最新推荐文章于 2024-03-17 09:44:41 发布

VIP文章 GISEarth

最新推荐文章于 2024-03-17 09:44:41 发布

阅读量1.1w

点赞数 5

分类专栏： javascript 文章标签：动画 javascript dom svg

本文链接：https://blog.csdn.net/happyduoduo1/article/details/51789577

版权

前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。

虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但是在实际运用中还是因为这样那样的细微区别遇到了不大不小的麻烦。所以通过此篇文章记录下遇到的问题和解决的方法。

获取SVGDocument

当使用JavaScript在页面上对HTML进行操作的使用，一个非常重要的对象就是document了。无论是getElementById、getElementsByTagName，异或是createElement，它们都是document对象上的方法。而且所有其它任何DOM对象都被包含在该对象之内。

一般而言，一个HTML文件，或者说一个网页都对应一个document对象，所以如果SVG是直接嵌套在HTML的内容中的话，它们就会共用一个document对象，因此可以直接通过该对象来获取到SVG元素对象。

比如下边的代表，在浏览器上打开，就会看到一个蓝色的圈而非绿色的圈，因为JavaScript通过document获得了circle对象，并重新设置了其fill属性。

  
  
  
   
    
    
    
     
     
     <html>
    
    
    
   
    
    
    
     
     
     <head>
    
    
    
   
    
    
        
     
     
     <title>Nested SVG
     
     
     </title>
    
    
    
   
    
    
    
     
     
     </head>
    
    
    
   
    
    
    
     
     
     <body>
    
    
    
   
    
    
    
     
     
      
    
    
    
   
    
    
    
     
     
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    
    
    
   
    
    
    
     
     
         version="1.1" width="20" height="20">
    
    
    
   
    
    
    
     
     
     <circle id="c" cx="10" cy="10" r="7" fill="green"/>
    
    
    
   
    
    
    
     
     
     </svg>
    
    
    
   
    
    
    
     
     
     <script type="text/javascript">
    
    
    
   
    
    
    
     
     
      
    
    
    
   
    
    
    
     
     
     var c = document.getElementById('c');
    
    
    
   
    
    
    
     
     
     c.setAttribute('fill','blue');
    
    
    
   
    
    
    
     
     
      
    
    
    
   
    
    
    
     
     
     </script>
    
    
    
   
    
    
    
     
     
     </body>
    
    
    
   
    
    
    
     
     
     </html>

不过大多时候，SVG并不会直接嵌套在HTML之中重现出来，更多的会选择将其作为图片通过img标签引进，或者当做背景图片在CSS中通过url引入。对于这种情况，SVG只是单纯的当做图片来使用而且一个XML类型的文档，所以也就无法使用JavaScript来操作它们

最低0.47元/天解锁文章

GISEarth

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
JavaScript操作SVG 提高篇

前阵子学习了一下SVG(Scalable Vector Graphics)，希望能借此弥补自己在图形艺术上的不足，当然最后也没有得到什么提高，不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目，也发现SVG可以弥补一些HTML元素的不足，比如倾斜、弧线、动画、复用等等。虽然SVG和HTML一样都属于XML的一种方言，一些基本的JavaScript对HTML的DOM操作都适用于SVG，但
复制链接

扫一扫