使用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(十)按比例设置视图大小

    有时候在布局界面的时候,UI要求某个View或者某张图片按比例显示,以适应不同的屏幕分辨率. 通常我们时通过自定义View或者引入第三方的库来解决.现在我们既然已经使用了ConstraintLayou ...

  2. Java工程师如何在1个月内做好面试准备?

    作者:石杉的架构笔记 写在前面 春节长假转眼已过,即将迎来的是一年一度的金三银四跳槽季. 假如你准备在金三银四跳槽的话,那么作为一个Java工程师,应该如何利用1个月的时间,快速的为即将到来的面试进行 ...

  3. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

  4. phtoshop cs6 下载安装及破解方法(另附Photoshop CC 2018破解版图文教程)

    前言: 前端虽然用PS不多,但有时需要用PS切图:UI给你PSD图,需要取色,查看字体颜色大小:测量元素宽高等 但有时想找一个“麻雀虽小,五脏俱全”又是破解版的PS,也不是那么容易的 注:ps完整版不 ...

  5. Python Tkinter 简单使用

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

  6. Rpc框架dubbo-server(v2.6.3) 源码阅读(一)

    额,dubbo的前世今生咱就不说了,有用的人都知道.(最新版本已更名 incubator-dubbo,预计版本3.0,不过咱们就先不掺和别人的开发过程了,以v2.6.3为蓝本) 首先,是工作需要,用到 ...

  7. 使用git在github上创建新工程

    这段时间进经常会忘记如何在github上同步工程,于是又得查资料,查参考书,浪费了很长时间,因此有了感触,写几篇有关此类问题的篇章! 这是老手新手都十分容易犯的错误,就是在创建一个新github项目或 ...

  8. LeetCode20:validParentheses

    validParentheses 题目描述 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...

  9. [Objective-C语言教程]数组(14)

    Objective-C编程语言提供了一种叫作数组的数据结构,它可以存储相同类型的固定大小顺序元素的集合.数组用于存储数据集合,但将数组视为相同类型的变量集合通常更有用. 可以声明一个数组变量(例如nu ...

  10. 【mysql】模糊查询的使用

    1.like/not like 关键字的模糊查询(SQL模式) 基础模板:  SELECT  *  FROM   test  WHERE name LIKE '%你好_'     :匹配       ...