我正在研究一个项目并遇到了障碍.在Chrome中,它可以按预期工作,但不能在Firefox和IE中使用.下面的代码实际上只是真实项目代码的一个非常简化的版本.基本上我正在尝试替换每组svg中的圆圈.所以我从预编码的圆开始,然后删除并将inner
HTML设置为具有新位置和半径的新圆.有必要删除现有的圈子,因为在最终版本中我将要完全替换内容.我意识到innerHTML将替换内容,但我在循环中运行它,因此我最终需要在清除之后=到圆圈的末尾.
我知道可能不是一个好的解释……
要求是它清除具有id =“whateverIWant”的组的子项,因为有多个组,然后重新定义子项.组中可以有多个子圆,每次迭代或刷新,最后一次可能有不同数量的子圆.
很多试验和错误让我达到了这一点,但可能有更好的方法来清除孩子并重新创建它们.请记住,新孩子的属性可以改变,生产中我可能会处理数百名这些孩子.我还将子集合作为字符串存储在数组中,然后再添加它们以进行其他处理.
<svg viewBox="0 0 640 480" height="480" width="640" style="background-color:white" version="1.1">
<g id="redC" stroke="none" fill="red" fill-opacity="0.1">
<circle cx="100" cy="450" r="50" />
<circle cx="100" cy="50" r="50" />
</g>
<g id="greenC" stroke="none" fill="green" fill-opacity="0.1">
<circle cx="150" cy="350" r="50" />
</g>
<g id="blueC" stroke="none" fill="blue" fill-opacity="0.1">
<circle cx="100" cy="350" r="50" />
</g>
</svg>
$(document).ready(function(){
document.getElementById("redC").innerHTML = "";
for(var i=1;i<5;i++){
var num = (i*10).toString();
document.getElementById("redC").innerHTML += "<circle cx='300' cy='50' r="+num+" />";
}
});
任何建议都非常感谢.
解决方法
SVG元素上的innerHTML属性还没有广泛的浏览器支持.在此期间,您可以通过dom操作方法创建元素.它们具有与常规HTML元素不同的命名空间,因此要创建它们,您不能只使用document.createElement(“circle”).相反,您还必须传递命名空间：
var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
在我的SVG项目中,为了方便创建SVG元素,我扩展了jQuery：
var svgns = "http://www.w3.org/2000/svg";
$.svg = function $svg(tagName) {
return $(document.createElementNS(svgns,tagName));
};
然后,您可以使用jQuery方法来操作SVG元素：
$(document).ready(function () {
$("#redC").empty();
for (var i = 1; i < 5; i++) {
var num = (i * 10).toString();
$.svg("circle").attr({
cx: 300,cy: 50,r: num
}).appendTo("#redC");
}
});
演示：http://jsfiddle.net/FfdaL/