理论应用svg中,咱们常常会用js去操作svg
一、外围API:
1、创立图形:ns
指命名空间,tagName
是标签名,例如svg、rect
document.createElementNS(ns, tagName)
2、增加子节点
element.appenChild(childElement)
3、获取、设置属性
element.getAttribute(name)element.setAttribute(name, value)
二、实例
<div id="svgArea"></div>
<script> // 命名空间 var SVG_NS = "http://www.w3.org/2000/svg" var svgArea = document.getElementById('svgArea') // 1、创立svg容器 var svg = document.createElementNS(SVG_NS, 'svg') // 2、创立svg中的 tag, 如rect var tag = document.createElementNS(SVG_NS, 'rect') // 3、设置tag的属性 tag.setAttribute('width', "100") tag.setAttribute('height', "100") tag.setAttribute('fill', "rgba(255,255,255,0)") tag.setAttribute('stroke-width', "1") tag.setAttribute('stroke', "rgb(0,0,255)") tag.setAttribute('x', '20') tag.setAttribute('y', '20') // 4、将tag塞进svg中 svg.appendChild(tag) // 5、将svg塞进指定容器 svgArea.appendChild(svg)</script>