SVG 学习<四> 基础API
目录
SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
JS代码
- // 容器
- var box = document.getElementById("box");
- // 创建svg
- var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
- // svg添加到容器
- box.appendChild(svg);
- // 创建图形
- var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
- // 设置矩形属性
- rect.setAttribute("x","10");
- rect.setAttribute("y","10");
- rect.setAttribute("width","300");
- rect.setAttribute("height","150");
- rect.setAttribute("height","150");
- rect.setAttribute("fill","black");
- // 添加图形到svg
- svg.appendChild(rect);
HTML代码
- <div id="box"></div>
svg 的dom命名空间和其他dom元素不一样。创建svg 元素需要用 createElementNS(namespace, ele); namespace 一般为“http://www.w3.org/2000/svg”
SVG 学习<四> 基础API的更多相关文章
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- Java学习 (四)基础篇 Java基础语法
注释&标识符&关键字 注释 注释并不会被执行,其主要目的用于解释当前代码 书写注释是一个非常好的习惯,大厂要求之一 public class hello { public static ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- Android JNI学习(四)——JNI的常用方法的中文API
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
随机推荐
- 批处理手动设置电脑的ip
参考: http://blog.csdn.net/jiangzhanchang/article/details/7063152 http://wenda.haosou.com/q/1378697364 ...
- ubuntu-docker入门到放弃(六)数据管理
在docker的数据管理中,有两个概念: 1.数据卷 数据卷是一个可供容器使用的特殊目录,它绕过文件系统,可以提供很多有用的特性: 1.1 数据卷可以在容器之间共享和重用 1.2 对数据卷的修改会立刻 ...
- Docker-compose ports和expose的区别
docker-compose中有两种方式可以暴露容器的端口:ports和expose. 1 ports ports暴露容器端口到主机的任意端口或指定端口,用法: ports: - "80:8 ...
- SynergyS7G2RTC时钟模块的使用
RTC功能描述 RTC时钟模块是Synergy芯片的一个时间外设,主要用于日期时间的存储和控制,有别于一般MCU中的Timer,RTC时钟有两种计时模式,日期模式和二进制计时模式,其中日期模式的时间可 ...
- 《亲测》nginx webscoket ssl conf配置示例
非crt证书,用的pem,其中 http://localhost:5003 是你要转发到的站点网址 配置的就是 server { listen 80; server_name smarthome.yi ...
- Howto Building GNU Toolchains
[REF: https://wiki.linaro.org/WorkingGroups/ToolChain/BuildingGNUToolchains] This page is a work in ...
- ALGO-10_蓝桥杯_算法训练_集合运算(排序)
问题描述 给出两个整数集合A.B,求出他们的交集.并集以及B在A中的余集. 输入格式 第一行为一个整数n,表示集合A中的元素个数. 第二行有n个互不相同的用空格隔开的整数,表示集合A中的元素. 第三行 ...
- Socket调用Close后如何终止套接口的问题
setsockopt 设置 SO_LINGER 选项 此选项指定函数close对面向连接的协议如何操作(如TCP).内核缺省close操作是立即返回,如果有数据残留在套接口缓冲区中则系统将试着将这些数 ...
- 关于requests的session方法保持不了cookie的问题。(seesion的意思是保持一个会话,比如 登陆后继续操作(记录身份信息) 而requests是单次请求的请求,身份信息不会被记录)
最近在做爬虫的时候遇到了一个问题,在用requests的session方法保持cookie的时候发现requests不能保持手动构建的cookie.起初以为requests只能自动保持由服务器返回的s ...
- 廖雪峰Java3异常处理-1错误处理-4自定义异常
JDK已有的异常: RuntimeException * NullPointerException * IndexOutOfBoundsException * SecurityException * ...