JS 操作svg画图

番茄西红柿发布于2019-04-23 13:32 / 1398人阅读

摘要：有一个图，使用标签，引入到了文件中文件华东地区手机个月的数据柱状图文件中然后使用文件来操纵，插入图形。可是，一般情况下，不建议混在一起使用，比如我这里的图就是多带带一个文件，然后使用插入到中的。最后的，是文件中，标签的新的节点，。

背景：

一共有3个文件：svg文件，html文件，js文件。

有一个svg图，使用embed标签，引入到了html文件中

svg文件：

HTML文件中：


    id="embed" width="640" height="400"
           type="image/svg+xml">

然后使用js文件来操纵svg，插入图形。

第一个拦路虎：获得svg dom，

如果你的svg是直接写在html文件中，那么，svg和HTML共用一个document，可以直接通过document.getElementById(svg的id)就可以获得。

可是，一般情况下，不建议混在一起使用，比如我这里的column图就是多带带一个svg文件，然后使用embed插入到HTML中的。

注意：使用embed、object插入的svg文件，其有完全属于自己的document：

此时，再想拿到svg, 则需要使用：getSVGDocument()；

使用方法：先拿到embed节点，再拿svg document，再拿svg节点：

function drawColumn(data) {
    var nameSpace = http://www.w3.org/2000/svg;
    var max = Math.max.apply(null, data);
    var proportion = 350/max;
    var interval = 35; //column间隔
    var columnStyle = stroke: blue; fill: orange;
    var embedSVG = document.getElementById(embed).getSVGDocument().getElementById(svgColumn);

//关键代码：embedSVG的赋值。最后的getElementById(svgColumn)，是svg文件中，svg标签的id
    for (let singleColumn of data) {
        var rect = document.createElementNS(nameSpace,rect);//creat新的svg节点，rect。
        rect.style = columnStyle; //给rect节点设置style
        height = singleColumn*proportion;
        rect.setAttribute(width, 30); //使用setAttribute来设置rect节点属性
        rect.setAttribute(height, height);
        rect.setAttribute(x, interval);
        rect.setAttribute(y, 380-height);
        embedSVG.appendChild(rect); //将这个新的rect节点 添加到svg节点里
        interval += 45
    }
}

注意：

此外，不同于HTML元素对象可以直接对一些属性赋值，SVG元素对象都需要通过调用setAttribute()方法来设定属性值。

使用 rect.width = 30 不起作用。

参考链接：http://blog.iderzheng.com/something-about-svg-with-javascript/

GPU云服务器云服务器 js svg 数据 js 修改svg颜色 js 操作 js 数据操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2011.html

D3.js可视化前端框架的使用要点

摘要：该事件不会区分字母的大小写，例如和被视为一致。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。而有元素与数据对应的部分称为。 1.安装

MASAILA 2019-08-22 14:57 评论0 收藏0
echarts 与 highcharts

摘要：渲染能力采用渲染除了对使用，一般来说，更适合绘制图形元素数量非常大这一般是由数据量大导致的图表如热力图地理坐标系或平行坐标系上的大规模线图或散点图等，也利于实现某些视觉特效如交通图。一．简介 echartsecharts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费； highcharthighcharts是国外的一家公司...

王笑朝 2019-08-22 17:35 评论0 收藏0
Svg初学总结

摘要：原来使用插件来画图发现还是用实现的，打算学习了解一下，以下都是可直接在插入。和属性可使矩形产生圆角。同时是基于矢量的，所以它能够很好的处理图形大小的改变原来使用js插件来画图highchart.js,发现还是用svg实现的，打算学习了解一下，以下都是可直接在html插入。支持浏览器：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari 什么是SVG？...

gself 2019-08-01 15:22 评论0 收藏0
d3.js实现svg缩放功能

摘要：本文代码转载自，通过实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对感兴趣的小伙伴可以参考下面代码。构造一个新的缩放行为。指定当前的缩放平移向量为如果未指定，返回当前平移向量，默认。本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。 JSFiddle地址: ...

刘玉平 2019-08-01 17:29 评论0 收藏0
d3.js实现svg缩放功能

摘要：本文代码转载自，通过实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对感兴趣的小伙伴可以参考下面代码。构造一个新的缩放行为。指定当前的缩放平移向量为如果未指定，返回当前平移向量，默认。本文代码转载自Stack Overflow，通过d3.js实现缩放很简单，但是滚轮和按钮能够完美缩放就不那么容易了，如果有对d3感兴趣的小伙伴可以参考下面代码。 JSFiddle地址: ...

guqiu 2019-08-20 18:55 评论0 收藏0