如何使用纯Javascript向嵌入的SVG添加元素?
How can I add elements to an embedded SVG with plain Javascript?
我写了一个小的示例页面,看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>IGO – IRC Go</title>
<link rel="stylesheet" type="text/css" href="igo.css" />
<script type="text/javascript" src="igo.js"></script>
</head>
<body>
<h1 onclick="makeCircle()">IGO – IRC Go</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="board"
width="4" height="4" viewBox="0 0 4 4">
<!-- content will be generated by script -->
</svg>
<div id="foo"></div>
</body>
</html>
其中igo.js
看起来像这样:
function makeCircle() {
var circle = document.createElement("circle");
var board = document.getElementById("board");
circle.cx = 4;
circle.cy = 4;
circle.r = 4;
circle.fill = "lime";
board.appendChild(circle);
}
问题是:它不起作用;圆圈不显示。你能帮我吗?
请查看以下网址:http://blog.blazingcloud.net/2010/09/17/svg-scripting-with-javascript-part-1-simple-circle/
你应该使用这样的代码:
var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute("cx", "250");
c2.setAttribute("cy", "100");
c2.setAttribute("r", "60");
c2.setAttribute("fill", "#996699");
c2.setAttribute("stroke", "#AA99FF");
c2.setAttribute("stroke-width", "7");
mySvg.appendChild(c2);
您当前正在编辑的是DOM对象,而不是浏览器使用的属性。
实例:http://jsfiddle.net/CJrrz/
相关文章:
- 在SVG地图上添加水的渐变,就像在谷歌地图(PHP/JS)中一样
- 将形状/掩码动态添加到内联svg中
- 如何使用javascript添加svg
- 如何在svg元素上添加和删除css类
- 动态创建foreignGroup并将其添加到svg中有什么问题
- 如何添加效果,以便将鼠标悬停在 SVG 元素上使其变大
- 在 <对象> 标记中加载 SVG 时,将侦听器添加到 SVG 卸载事件
- 如何将运动模糊尾巴添加到圆圈中的 svg 元素
- 如何添加 SVG 文本标记 从 JavaScript 函数返回的值
- 是否可以用D3将svg元素添加到开放层映射中
- 添加图像与点svg画布
- 如何在svg中添加围绕整个圆的笔划和旋转圆的动画
- 我可以将页面上已经存在的svg添加到另一个svg中吗
- Snap SVG添加/删除链接属性
- 使用DOM向现有SVG添加SVG元素
- 向SVG添加CSS样式
- 将SVG添加到HTML并处理事件
- 如何动态地向HTML5 SVG添加元素
- 不能使用SVGweb在Internet Explorer中为SVG添加侦听器
- 如何使用纯Javascript向嵌入的SVG添加元素?