innerHTML不会写入svg组Firefox和IE [英] innerHTML not writing into an svg group Firefox and IE

问题描述

我正在研究一个项目，并遇到了一个路障。在Chrome中，它按预期工作，但不适用于Firefox和IE。下面的代码实际上只是真实项目代码的一个非常简化的版本。基本上我试图替换svg的每个组中的圈子。因此，我从预编码的圆圈开始，然后删除并将innerHTML设置为具有新位置和半径的新圆圈。有必要删除现有的圈子，因为在最终版本中我想完全替换内容。我意识到innerHTML将取代内容，但我正在循环运行这个内容，所以我最终需要在清除后将+ =加到圆圈的末尾。

我知道可能不是一个很好的解释...

要求是清除组的子女id =whateverIWant，因为有多个组，然后重新定义孩子。组中可以有多个子圆圈，每次迭代或刷新时，可能会有最后一次的子圆圈数量不同。

很多反复试验让我明白了这一点，但可能有更好的方法来清除孩子并重新创建孩子。请记住，新生儿的属性可能会改变，而在生产中，我可能会处理数百名这些儿童。我还将一组孩子作为字符串存储在一个数组中，然后将其添加到其他处理中。

 < svg viewBox =0 0 640 480height =480width =640style =background-color：whiteversion =1.1> 
 < circle cx =100cy =450r =50/> 
< circle cx =100cy =50r =50/> 
< / g> 
< g id =greenCstroke =nonefill =greenfill-opacity =0.1> 
< circle cx =150cy =350r =50/> 
< / g> 
 < circle cx =100cy =350r =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/

I am working on a project and ran into a road block. In Chrome it works as intended but not in Firefox and IE. The code below is really just a very simplified version of the real project code. Basically I'm trying to replace the circles in each group of the svg. So I start with precoded circles and then remove and set innerHTML to a new circle with new location and radius. It is necessary to remove the existing circles as in the final version I will want to completely replace the contents. I realize innerHTML will replace the contents but I am running this in a loop and so I'd ultimately need to += to the end of the circles after clearing it out.

I know probably not a good explanation...

Requirements are that it clears the children of group with id="whateverIWant" as there is more than one group, then redefines the children. There can be more than one child circle in the group, and each iteration, or refresh, there could be a different number of children circles as the last time.

A lot of trial and error got me to this point, but there are probably better methods to clear the children and re create them. Keep in mind the attributes of the new children can change and that in production I may be handling hundreds of these children. I'm also storing a collection of the children as strings in an array before adding them for purposes of other processing.

<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+" />";
    }
});

Any advice is much appreciated.

解决方案

The innerHTML property on SVG elements does not yet have wide browser support. In the meantime, you can create the elements via dom manipulation methods. They have a different namespace than regular HTML elements, so to create them, you can't just use, document.createElement("circle"). Instead, you have to pass the namespace as well:

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

In my SVG projects, I extend jQuery for convenience in creating SVG elements:

var svgns = "http://www.w3.org/2000/svg";
$.svg = function $svg(tagName) {
    return $(document.createElementNS(svgns, tagName));
};

You can then use jQuery methods to manipulate your SVG elements:

$(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");
    }
});

Demo: http://jsfiddle.net/FfdaL/

这篇关于innerHTML不会写入svg组Firefox和IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！