属性更改后，JavaScript，SVG clippath无法正常显示

Question

我有一个基于SVG的图表。顶部是一个可滚动区域，用户可以在图形中导航，如图所示：

通过拖动左/右任一选项卡，用户可以放大绘图的特定部分，如图所示：

请注意，只有图表的选定部分为蓝色，并且具有灰色突出显示。蓝色和高光都没有改变，但是使用剪贴蒙版进行剪裁：

<clippath id="clip_path_scroll">
  <rect id="clip_path_scroll_rect" x="x" y="y" width="w" height="h" stroke-width="0" />
</clippath>

和

<g clip-path="url(#clip_path_scroll)">
  <rect id="highlighted" width="w" height="h" x="x" y="y" fill="rgba(0, 0, 0, .03)" stroke="none" />
  <path id="blue_plot" d="..." stroke="rgba(26, 171, 219, 1)" stroke-width="2" fill="none"/>
</g>

这一切都很好，花花公子。拖动标签时，剪辑路径可以完美地工作。在这种情况下，随着标签的滑动，它会逐渐改变。

但我有一个重置按钮，调用以下内容：

$('#left_scroll_group').attr('transform', 'translate(0, 0)');
$('#right_scroll_group').attr('transform', 'translate(0, 0)');
$('#clip_path_scroll_rect').attr('width', width).attr('x', x);

当它运行时，结果如下：

请注意，选项卡组会快速回到它们应该的位置，但看起来剪辑路径仅部分回到原始宽度和x位置。

但这就是问题

如果我查看页面源代码并将鼠标悬停在clippath rect对象上，则会显示以下内容：

也就是说，它显示rect对象DID调整大小并移动到其原始位置，但显示不正确。立即移动中的任何一个选项卡将clippath捕捉回正常工作，就像前两张图片一样。

为什么会这样？无论右侧标签是移动，还是左侧，或两者都发生，都会发生这种情况。如果标签只移动了一点，那么似乎没什么问题，但随着标签的进一步移动，明显的毛刺/错误会增加。

类似的函数对clippath执行相同的attr更改，但总是缩短路径长度。只有在延长长度时才会出现这种故障。

我在图中的许多其他元素上使用相同类型的操作，并且一切正常。所有都用jQuery表示法引用（即$('#element')）。

我对使用d3或其他库不感兴趣。我只是在寻找jQuery或纯JS解决方案。

编辑1

我也试过

var steps = Math.floor(scrollPlotWidth - $('#clip_path_scroll_rect').attr('width'));
var curWidth = Math.ceil($('#clip_path_scroll_rect').attr('width'));
var curX = $('#clip_path_scroll_rect').attr('x');

for(var i = 0; i < steps; i++){
    $('#clip_path_scroll_rect').attr('x', curX).attr('width', curWidth);
    curX--;
    curWidth++;
}

没有成功。这些变化正在逐步发生，但仍然没有骰子 - 它看起来和以前一样。这个剪辑问题只发生在Safari中，并且在FireFox中似乎没问题。 Haven没有测试过其他人。

工作解决方案（HACKED）

在clippath中定义rect时，我更改了width属性。我已将其从上面显示的内容更改为以下内容：

<rect id="highlighted" style="width:w;" height="h" x="x" y="y" fill="rgba(0, 0, 0, .03)" stroke="none" />

然后，clippath功能正常工作IFF我应用了两个操作：

$('#clip_path_scroll_rect').attr('x', x).css('width', w);

$('#clip_path_scroll_rect').animate(
    {"width": w},
    {duration: 1,
    step: function(){
        this.setAttribute("x", x);
    }
});

删除其中任何一个都会阻止它工作。我不确定为什么，但它必须是一个临时修复，直到更好的东西出现。答案仍然非常受欢迎！