带有 SVG“def”填充的 SVG 矩形，在重新绘制期间变为黑色

Question

虽然这是有史以来最极端的案例之一，但也许你们中的一个人看到了......

由于某种原因，当您拖动指向 SVG def 的填充填充的 SVG 矩形时，整个矩形变为黑色！ （我认为浏览器重新绘制有问题......）

如果有人知道修复或解决方法的线索，我们将不胜感激

拖动下面的时候会变黑。

http://jsfiddle.net/d11k5bxg/5/

<div class="content">
<svg width="100%" height="100%">
    <defs>
        <pattern id="Triangle" width="5" patternUnits="userSpaceOnUse" height="5">
            <rect fill-opacity="0.5" width="5" fill="#DDD" height="5"></rect>
            <path stroke="#000" stroke-width="0.5" d="M0 5L5 0ZM6 4L4 6ZM-1 1L1 -1Z" stroke-opacity="0.2"></path>
        </pattern>
    </defs>
    <g class="chart-content">
        <g class="layer10">
            <g class="bar-chart compare_items" transform="translate(0,5)">
                <g class="bar-group">
                    <rect class="bar" height="165" width="120" fill="url(#Triangle)" ></rect>
                </g>
            </g>
        </g>
    </g>
</svg>

$("div").draggable({
  helper: function (e) {
    var draggedElement = $(e.currentTarget).clone(true);
    return draggedElement;
  }
});

（还为此开了一张 Chromium 票：https://code.google.com/p/chromium/issues/detail?id=428174）

Answer 1

总的来说，我怀疑您使用的拖放 API 尚未在 SVG 上进行测试。但是，发生的事情肯定是非常错误的，因为拖动后的 DOM 看起来还不错，但图形却不行。

问题似乎源于 JQuery 在拖动操作期间复制了整个 SVG。这意味着id="triangle" 暂时有两种不同的模式（这很糟糕）。我的猜测是矩形与该模式的第二个实例相关联，然后当该实例消失时，它不会重新附加到原始模式

如果您只是在单个 SVG 中拖放，您可能可以实现自己的拖动行为，只需复制矩形并使用 SVG 属性定位它，而不是复制整个 SVG。

另一种解决方法是将您的所有<defs> 内容分离成一个不显示在屏幕上的 SVG。这样，当您拖动可见的 SVG 时，它就不会重复，并且您避免了重复的 id 值。