SVG 学习<四> 基础API
2024-10-01 06:45:40
目录
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”
最新文章
- Noise Contrastive Estimation
- 【lattice软核】ROM的使用
- 使用NSScanner,将十六进制字符串转十进制
- RunLoop的深入了解
- NOI OpenJudge 8469 特殊密码锁 Label贪心
- USACO Section 3.1: Score Inflation
- Java I/O继承图
- Dom4j 学习笔记
- 如何实现select组件的选择输入过滤作用
- dotnet core cli 命令
- [ gczdac ] HDU1000
- qml: C++调用qml函数
- C#生成PDF文件流
- 定制库到maven库
- jQuery封装 写的的确不错 转载
- .net HttpCrawler
- XXX is not in the sudoers file. This incident will be reported 的问题解决方案
- angularJS控制器之间的相互通信方式、$broadcast、$emit、$on
- 23、Flask实战第23天:Flask-Restful
- 使用ffmpeg压缩视频