svg DOM的一些js操作
这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg.
下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别)
Circle
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); }
Ellipse
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "ellipse"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "rx", 20); shape.setAttributeNS(null, "ry", 10); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); }
Line
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "line"); shape.setAttributeNS(null, "x1", 5); shape.setAttributeNS(null, "y1", 5); shape.setAttributeNS(null, "x2", 45); shape.setAttributeNS(null, "y2", 45); shape.setAttributeNS(null, "stroke", "green"); svgDocument.documentElement.appendChild(shape); }
Path
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "path"); shape.setAttributeNS(null, "d", "M5,5 C5,45 45,45 45,5"); shape.setAttributeNS(null, "fill", "none"); shape.setAttributeNS(null, "stroke", "green"); svgDocument.documentElement.appendChild(shape); }
Polygon
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; shape = svgDocument.createElementNS(svgns, "polygon"); shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5"); shape.setAttributeNS(null, "fill", "none"); shape.setAttributeNS(null, "stroke", "green"); svgDocument.documentElement.appendChild(shape); }
Polyline
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; shape = svgDocument.createElementNS(svgns, "polyline"); shape.setAttributeNS(null, "points", "5,5 45,45 5,45 45,5"); shape.setAttributeNS(null, "fill", "none"); shape.setAttributeNS(null, "stroke", "green"); svgDocument.documentElement.appendChild(shape); }
Rectangle
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "rect"); shape.setAttributeNS(null, "x", 5); shape.setAttributeNS(null, "y", 5); shape.setAttributeNS(null, "width", 40); shape.setAttributeNS(null, "height", 40); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); }
Rounded Rectangle
var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "rect"); shape.setAttributeNS(null, "x", 5); shape.setAttributeNS(null, "y", 5); shape.setAttributeNS(null, "rx", 5); shape.setAttributeNS(null, "ry", 5); shape.setAttributeNS(null, "width", 40); shape.setAttributeNS(null, "height", 40); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); }
Use
var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var svgRoot = svgDocument.documentElement; var defs = svgDocument.createElementNS(svgns, "defs"); var rect = svgDocument.createElementNS(svgns, "rect"); rect.setAttributeNS(null, "id", "rect"); rect.setAttributeNS(null, "width", 15); rect.setAttributeNS(null, "height", 15); rect.setAttributeNS(null, "style", "fill: green"); defs.appendChild(rect); var use1 = svgDocument.createElementNS(svgns, "use"); use1.setAttributeNS(null, "x", 5); use1.setAttributeNS(null, "y", 5); use1.setAttributeNS(xlinkns, "xlink:href", "#rect"); use2 = svgDocument.createElementNS(svgns, "use"); use2.setAttributeNS(null, "x", 30); use2.setAttributeNS(null, "y", 30); use2.setAttributeNS(xlinkns, "xlink:href", "#rect"); svgRoot.appendChild(defs); svgRoot.appendChild(use1); svgRoot.appendChild(use2); }
摘自:http://blog.sina.com.cn/s/blog_55205e230100aq0w.html
加支付宝好友偷能量挖...