SVG 路径 - 仅渲染指定路径的百分比

Question

注意：我感觉这个问题的答案将依赖于经常用于回答有关动画 svg 路径的问题的虚线技巧（例如Animate svg path，以及无数其他类似问题）。如果可能的话，我正在寻找一个不依赖于虚线的答案。

假设您有一个 SVG，其中包含一些对象之间的路径。您知道对象的中心位置和宽度。原则上，您可以计算仅从每个对象的边缘开始的路径。但是，这可能很乏味。那么如何指定从对象 1 到对象 2 的路径，但偏移绘制的部分使其仅从边缘显示？

在下面的代码中，两点之间的第一条路径使用它们的中心。 这就是我要指定路径的方式。第二条路径是我希望如何渲染路径。例如我正在寻找像 offset-from-start=10 和 offset-from-end=10 这样的属性来执行此操作。如果路径是复合路径或对象具有不规则形状，则计算较短路径的角度很繁琐（但很简单）。此外，使用较短的路径会改变曲线，而希望这种偏移不会。

<svg style="width:200px;height:200px">
  <circle r="10" cx="10" cy="10" fill="red"></circle>
  <circle r="10" cx="190" cy="10" fill="red" style="opacity:0.5"></circle>
  <path d="M10 10 L 190 10" stroke-width="4" stroke="black"></path>


  <circle r="10" cx="10" cy="50" fill="red"></circle>
  <circle r="10" cx="190" cy="50" fill="red" style="opacity:0.5"></circle>
  <path d="M20 50 L 180 50" stroke-width="4" stroke="black"></path>

</svg>

Answer 1

如果您想避免使用stroke-dasharray 属性，那么简单地隐藏与您的对象相交的路径部分怎么样？做到这一点的直接方法是避免部分透明并在下面绘制路径：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     style="width:200px;height:50px">
  <path d="M10 10 L 190 10" stroke-width="4" stroke="black"></path>
  <circle r="10" cx="10" cy="10" fill="red"></circle>
  <circle r="10" cx="190" cy="10" fill="#ff8080"></circle>
</svg>

更复杂一点的是定义一个掩码。为此，您需要先在 mask 内定义任何对象，在白色背景上不带样式（隐式黑色），然后使用视觉样式重用它们：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     style="width:200px;height:50px">
  <mask id="mask" maskUnits="userSpaceOnUse">
    <rect width="100%" height="100%" fill="white" />
    <circle id="obj1" r="10" cx="10" cy="10" />
    <circle id="obj2" r="10" cx="190" cy="10" />
  </mask>
  <use xlink:href="#obj1" fill="red" />
  <use xlink:href="#obj2" fill="red" opacity="0.5" />
  <path d="M10 10 L 190 10" stroke-width="4" stroke="black" mask="url(#mask)" />
</svg>