Question

虽然它是有史以来最有争议的案件之一，但也许你们其中一个人看到了......

出于某种原因，当你用一个指向SVG def的填充拖动一个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;
  }
});

（还开了一张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值。

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

1 个答案: