属性更改后JavaScript、SVG clippath未正确显示

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

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

请注意，只有图形的选定部分是蓝色的，并且具有灰色高光。蓝色和高光均保持不变，但使用剪裁遮罩进行剪裁：

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

当运行时，结果如下所示：

$('#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);

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

请注意，选项卡组会准确捕捉回它们应该位于的位置，但剪辑路径似乎只是部分返回到其原始宽度和x位置

但事实并非如此

如果我查看页面源代码，并将鼠标悬停在clippath

rect

对象上，它将显示以下内容：

$('#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);

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

也就是说，它显示了

rect

对象确实调整了大小并移动到了其原始位置，但没有正确显示。移动任何一个选项卡都会立即使clippath恢复正常工作，如前两幅图像所示

为什么会这样？无论是移动右侧选项卡，还是移动左侧选项卡，或同时移动两者，都会发生这种情况。如果标签只移动了一点点，似乎没有什么问题，但随着标签移动得更远，明显的故障/错误会增加

类似的函数对clippath执行相同的

attr

更改，但它总是缩短路径长度。这个小故障似乎只有在延长长度时才会发生

我在图中的许多其他元素上使用相同类型的操作，所有操作都很好。所有元素都用jQuery符号引用（即

$（“#元素”）

）

我对使用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++;
}

然后，如果我应用两个操作，clippath功能将正常工作：

$('#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);
    }
});

---

移除其中任何一个都将阻止其工作。我不知道为什么，但这将是一个临时的修复，直到更好的事情来了。答案仍然非常受欢迎

你在测试什么浏览器？这只是发生在那件事上吗？作为一种解决方法，可以尝试重新附加剪辑路径。例如，

gElem.attr（“剪辑路径”、“url（#剪辑路径_滚动”）

@PaulLeBeau是的，关于浏览器的事情你是对的-我一直在Safari中测试。它在FireFox中就像是一种享受，我在Chrome中遇到了问题，但我怀疑我只需要将它上传到服务器上就可以了。至于重新连接，我尝试了1）重命名clippath，然后2）将

g

标记中的clippath更改为新名称。还是没有骰子。@Birrel你在Chrome上找到解决方案/错误报告了吗？我在Webkit浏览器上遇到了同样的问题。@Jamie不，我没有。我想在结束其他东西的时候把剧本放在次要位置，所以从那以后就没怎么看它了。我99%的跨浏览器测试都是在Safari中进行的，这很可能是我的问题所在。我通过每次渲染时更改clipPath元素的ID（并更新引用）找到了一个（黑客）解决方案。在我的例子中，我只是将新的宽度附加到ID上。您正在哪个浏览器上测试？这只是发生在那件事上吗？作为一种解决方法，可以尝试重新附加剪辑路径。例如，

gElem.attr（“剪辑路径”、“url（#剪辑路径_滚动”）

@PaulLeBeau是的，关于浏览器的事情你是对的-我一直在Safari中测试。它在FireFox中就像是一种享受，我在Chrome中遇到了问题，但我怀疑我只需要将它上传到服务器上就可以了。至于重新连接，我尝试了1）重命名clippath，然后2）将

g

标记中的clippath更改为新名称。还是没有骰子。@Birrel你在Chrome上找到解决方案/错误报告了吗？我在Webkit浏览器上遇到了同样的问题。@Jamie不，我没有。我想在结束其他东西的时候把剧本放在次要位置，所以从那以后就没怎么看它了。我99%的跨浏览器测试都是在Safari中进行的，这很可能是我的问题所在。我通过每次渲染时更改clipPath元素的ID（并更新引用）找到了一个（黑客）解决方案。在我的例子中，我只是将新的宽度附加到ID上。