Javascript SVG在克隆时变为黑色

当我发现一个奇怪的行为时，我正在玩jQuery中的函数

这段代码再现了这个问题。第一个div包含一个SVG。两个按钮允许将SVG的克隆执行/撤消为第二个div。尝试两次会使圆圈变黑

HTML

注:

• 使用jQuery或Javascript进行克隆会导致相同的错误

---

克隆后，有两个id为“r”的元素，一个在原始元素中，一个在克隆元素中。所有id都必须是唯一的，因此文档不再有效。

我有一种预感，这可能是因为您正在克隆linearGradient，它有一个

id

属性（当然，在整个文档中应该是唯一的）。这可能会让SVG处理器感到困惑

我的理论似乎通过在克隆过程中更改ID得到了证实：

$('input[value="copy"]').click(function () {
    var clone = $("#orgdiv").clone();
    // Change the ID of the clone, so we don't have duplicate IDs
    clone.find("#r").attr('id', 'unique');
    $("#copydiv").html(clone);
});

…这似乎可以防止出现问题。（在这种情况下，克隆仍然会获得渐变，即使其克隆渐变的ID已更改，因为它通过其ID查找原始渐变。）

请点击此处：

我猜在你的例子中，“引擎盖下”发生的事情是，处理器拾取你正在创建的第二个渐变过滤器元素，用于第一个圆，然后当它被你的

empty（）

破坏时，它失去了对它的引用，从而留下了圆而没有渐变。这只会发生第二次的确切原因可能是SVG渲染器与HTML5文档交互的实现细节

---

有关此问题的更多信息，请参见。

@Matt Gibson介绍了一种破解方法：鼓起新ID，然后使用冗余的

linearGradient

定义复制html，引用原始的

linearGradient

幸运的是，您确实需要这样做；）

svg

标记的部分优势在于它们是自己的疯狂小容器。因此，您可以从uri外部引用内容

&因此，如果您从事克隆业务，那么您可以将模板模型抽象出来并无限重复使用，而不用担心ID：

$（文档）.ready（函数（）{
$（'input[value=“copy”]”）。单击（函数（）{
$（“#copydiv”）.append（$（“：first”，“#orgdiv”）.clone（））；
});
$（'input[value=“clear”]”）。单击（函数（）{
$（“#copydiv”）.empty（）；
});
});

聪明人
原型

克隆

回答了这个问题。非常感谢。这也可以解释为什么我们也可以解决这个问题，因为同样的原因：
#r
消失了，需要再次初始化！非常感谢。我的问题基本上和原来的问题一样。我有两个使用相同梯度的div。我显示/隐藏其中一个，而另一个始终可见。隐藏/显示第二个俯冲几次后，始终可见的俯冲上的渐变变黑。我显示第二个俯冲，一切正常。我把它藏起来，第一个div的渐变变成黑色。现在，我根据传递给构造函数的字符串，向渐变的id中添加一个额外的文本位。现在梯度保持不变！！非常感谢比尔
$('input[value="copy"]').click(function(){
    $("#copydiv").html($("#orgdiv").clone());
});

$('input[value="clear"]').click(function(){
    $("#copydiv").empty();
});

$('input[value="copy"]').click(function () {
    var clone = $("#orgdiv").clone();
    // Change the ID of the clone, so we don't have duplicate IDs
    clone.find("#r").attr('id', 'unique');
    $("#copydiv").html(clone);
});