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

虽然这是有史以来最棘手的案件之一，也许你们中有人看到了

出于某种原因，当您拖动一个带有填充的SVG矩形并指向SVG def时，整个矩形将变为黑色！浏览器中出现问题，我想重新绘制

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

拖动下面的图标时，它将变为黑色

---

还打开了一张Chromium罚单：

一般来说，我怀疑您使用的拖放API没有在SVG上测试过。然而，所发生的事情肯定是非常麻烦的，因为仍然在拖动之后的DOM看起来很好，但是图形没有

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

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

---

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

这个答案很可能就是原因所在。我在绘制具有渐变的JS库时看到了类似的行为，并且页面上有多个图表。他们的应用程序为单独SVG中使用的渐变创建了相同的名称，其中一个的动态更新有时会破坏其他图表。我们可以解决这个问题，因为我们可以拦截并应用随机/不同的名称

<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;
  }
});