SVG的学习(34—36)

最新推荐文章于 2024-04-04 05:28:17 发布

weixin_30384031

最新推荐文章于 2024-04-04 05:28:17 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yadiblogs/p/9302471.html

本文介绍如何使用JavaScript动态创建SVG元素，通过具体代码示例展示如何根据数据生成SVG矩形，并调整其样式。

使用js来动态绘制svg图片，首先就是要创建svg 节点。

使用createElementNS(),语法：

document.createElementNS(namespaceURI, qualifiedName[, options]);

参数：

有效的命名空间URL有：

代码举例：

var nameSpace = 'http://www.w3.org/2000/svg';  //命名空间url
    var max = Math.max.apply(null, data);
    var proportion = max/350;
    var interval = 40;
    var columnStyle = 'stroke: blue; fill: blue';
    for (var singleColumn of data) {
        document.createElementNS(nameSpace,'rect') //创建矩形
    }