擦除或使部分 svg 路径透明

Question

我最近开始使用 SVG 路径。我正在使用 JavaScript SVG 和 Canvases 来允许用户使用鼠标动态绘制。

我的一个问题是，当用户尝试在已经存在的路径上绘制时，需要一段时间才能超越它，我想知道是否有一种有效/更顺畅的方式来做到这一点。

我的另一个问题是擦除已绘制的 SVG 路径的一部分。我知道我可以使用不同的颜色（例如白色）来过度绘制路径，但如果存在背景图片，那么它仍然会掩盖部分背景。无论如何要编辑部分路径以使其透明甚至删除部分路径？

我尝试获取画布的背景颜色并使用该颜色绘制路径，但它仅获取原始点的颜色。

谢谢。

Answer 1

目前对我有用的解决方案如下。

• 在 javascript 文件中，创建了一个数组。也是一个计数器。

  var idArray = new Array();
var idCounter = 0;

• 在创建路径时，id 被推送到数组中。

  idArray.push(idCounter);

• 然后使用"Name_of_path".attr('id',idCounter);设置路径的id。

• 现在通过使用计数器 i、i < idArray.length 循环遍历 id，您可以找到点击了哪个路径并将其删除。

  for(var i = 0;i<list.length;i++){
$("#"+list[i]).click(function(){
var v = "name_of_paper".getById($(this).id);
$(this).remove();
});
  

• 此外，通过在样式中定义一个 id 类，您可以更改不透明度。

此解决方案只是完全删除路径，我还没有删除部分路径的解决方案。只是一种解决方法。