使用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') //创建矩形
}

SVG的学习(34—36)的更多相关文章

  1. SVG相关学习(一)SVG基础

    SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" heigh ...

  2. svg的学习

    svg的学习 1,初步了解 1,大致看了一下svg的简介,在图形的操作和展示上有很大的优势,例如不会失精:灵活的dom操作:很好的兼容性(IE需要下载插件).so,是一门值得深究的前端课程: 2,看了 ...

  3. SVG绘图学习总结

    在我们平时做的很多网站项目中都会需要绘制各种各样的二维矢量图形.比如做城市地下管网的断面图.管线管点的坐标位置矢量标识图.钻孔位置或地层剖面图等等.我们有很多中方法来绘制这些矢量图(vml.canva ...

  4. Android学习笔记36:使用SQLite方式存储数据

    在Android中一共提供了5种数据存储方式,分别为: (1)Files:通过FileInputStream和FileOutputStream对文件进行操作.具体使用方法可以参阅博文<Andro ...

  5. (数据科学学习手札36)tensorflow实现MLP

    一.简介 我们在前面的数据科学学习手札34中也介绍过,作为最典型的神经网络,多层感知机(MLP)结构简单且规则,并且在隐层设计的足够完善时,可以拟合任意连续函数,而除了利用前面介绍的sklearn.n ...

  6. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  7. Android学习系列(36)--App调试内存泄露之Context篇(上)

    Context作为最基本的上下文,承载着Activity,Service等最基本组件.当有对象引用到Activity,并不能被回收释放,必将造成大范围的对象无法被回收释放,进而造成内存泄漏. 下面针对 ...

  8. 我的android学习经历36

    最近把android的基础知识都学的差不多了,也写了许多demo,就想自己写一个app,可是写到后面的时候发现很混乱,所以还是得写一些文档,用xml语言写一下基础的类以及一些其他的东西.所以要想写一个 ...

  9. android学习笔记36——使用原始XML文件

    XML文件 android中使用XML文件,需要开发者手动创建res/xml文件夹. 实例如下: book.xml==> <?xml version="1.0" enc ...

随机推荐

  1. Android开发 - 掌握ConstraintLayout(十一)复杂动画!如此简单!

    介绍 本系列我们已经介绍了ConstraintLayout的基本用法.学习到这里,相信你已经熟悉ConstraintLayout的基本使用了,如果你对它的用法还不了解,建议您先阅读我之前的文章. 使用 ...

  2. Python Tkinter 简单使用

    简单的一些实例,能够实现一般的功能就够用了 Tkinter: 创建顶层窗口: # -*- coding: utf-8 -*- from Tkinter import *   root = Tk() r ...

  3. Metasploit Framework(2)Exploit模块、Payload使用

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Exploit模块分为主动和被动(Active.Pas ...

  4. iOS----KVC和KVO 详解

    一. KVC 1.KVC介绍 KVC 就是键值编码(key-value-coding). 2.KVC 的主要作用: (1)通过键值路径为对象的属性赋值.主要是可以为私有的属性赋值. AppleView ...

  5. [android学习]__使用百度地图开放api编写地图定位app

    前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...

  6. Unity3D热更新之LuaFramework篇[01]--从零开始

    前言 因工作关系,需要对手头的项目进行热更新支持.了解后发现,Lua的几个变种:XLua.ToLua(原uLua)和Slua都可以做Unity热更,而ToLua更是提供了一个简易的热更框架--LuaF ...

  7. Maven内置属性、POM属性

    1.内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ ...

  8. Java中的instanceof和isInstance基础讲解

    1. instanceof 是一个操作符 使用方法: ? 1 2 if(a instanceof B){ } 表示:a 是不是 B 这种类型 2. isInstance是Class类的一个方法 ? 1 ...

  9. SpringBoot快速引入第三方jar包

    工作中,我们常会用到第三方jar包,而这些jar包往往在maven仓库是搜不到的,下面推荐一种简单.快速的引入第三方依赖的方法: 比如第三方jar包在lib文件夹下,对pom.xml的配置如下: &l ...

  10. 使用LayoutInflater添加一个布局引用

    LayoutInflater 与 xml 的<include/>的区别,至今没搞清楚,下面记录一下LayoutInflater引用一个布局并立即显示呈现的方法: private void ...