javascript - 克隆时 SVG 变黑

Question

我在玩 clone()当我发现一个奇怪的行为时从 jQuery 调用函数。

此代码重现了该问题。第一个 div 包含一个 SVG。两个按钮允许将 SVG 克隆到第二个 div 中。尝试两次会使圆圈变黑。

HTML

<div id="orgdiv">
    <svg width="200" height="200" style="margin:0">
        <linearGradient  id="r" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#00ffff"></stop>
            <stop  offset="100%" stop-color="#ffff00"></stop>
        </linearGradient>
        <circle cx="100" cy="100" r="80" style="fill:url(#r)" />
    </svg>
</div>

<input type="button" value="copy">
<input type="button" value="clear">

<div id="copydiv"></div>

JS

$('input[value="copy"]').click(function(){
    $("#copydiv").html($("#orgdiv").clone());
});

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

jsFiddle here

备注:

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

Answer 1

我有一种预感，这可能是因为您正在克隆 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 找到原始渐变。)

JSFiddle 在这里:http://jsfiddle.net/2K4xv/2/

我猜你的情况“在引擎盖下”发生的事情是处理器正在拾取你为第一个圆圈创建的第二个渐变过滤器元素，然后在它被你的 empty() 破坏了，因此你只剩下圆圈但没有渐变。确切地说，为什么这种情况只发生第二次，可能取决于 SVG 渲染器与 HTML5 文档交互的实现细节。

this earlier question 中有关于此问题的更多信息.