SVG rectangle with SVG "def" fill, becomes black during re-paint - google-chrome

Question

though it's one of the most corner cases ever, maybe one of you saw that...
for some reason, when you drag an SVG rectangle with fill that is pointed to a SVG def, the whole rectangle becomes black! (something wrong in the browser re-paint I think...)
if someone has a clue for a fix or a workaround, it will be highly appreciated
when dragging the below, it becomes black.
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;
}
});
(also opened a Chromium ticket on that: https://code.google.com/p/chromium/issues/detail?id=428174)

Answer 1

In general, I suspect that the drag-and-drop API you're using has not been tested on SVG. However, what is happening is definitely very buggy, since the DOM still after the drag looks fine but the graphic doesn't.
The problem seems to stem from the fact that JQuery duplicates the entire SVG during the drag operation. Which means there are temporarily two different patterns with id="triangle" (which is bad). My guess is that the rectangle gets associated with the second instance of that pattern, and then when that instance disappears, it doesn't re-attach to the original pattern
If you're only dragging and dropping within a single SVG, you can probably implement your own drag behaviour, just duplicating the rect and positioning it using SVG attributes, instead of duplicating the entire SVG.
Another workaround would be to separate out all your <defs> content into an SVG that isn't displayed on screen. That way, it wouldn't be duplicated when you drag the visible SVG, and you avoid the duplicated id values.