SVG 隐藏透明元素下的线段

Question

这个问题听起来可能很矛盾，但我有一组通过线连接的 svg 对象。这是准系统版本：

<svg width="200" height="200">
<defs>
  <clipPath id='clipLine'>
    <circle cx='0' cy='0' r="30"/>
  </clipPath>
</defs>
<rect x='0' y='0' width='200' height='200' fill='rgb(255,128,255)' /> 
  <line x1="50" y1="50" x2="150" y2="75" stroke='red' stroke-width='2' />
<g>
  <circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="50" cy="50" r="30" stroke="green" stroke-width="4" fill-opacity='0.0' clip-path="url(#clipLine)"/>
</g>
<g>
  <circle cx="150" cy="75" r="20" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="75" r="30" stroke="green" stroke-width="4" fill-opacity='0.0' clip-path="url(#clipLine)"/>
</g>
</svg>

我有一个内圈和一个外圈。 外圆是透明的，具有可见的周长，并且该线通过 cx，cy 坐标连接两个节点。我希望这条线只到达外圈的周长。

我可以用向量数学计算位置，但我不知道当我拖着一堆这些位置时它会影响性能。我可以使用剪切和遮罩来达到相同的效果吗？到目前为止，当我试图在圆圈和整行上附加剪辑时，我只能隐藏它们。

Answer 1

带遮罩的反转形状

我不确定你的问题是什么，所以我会猜测这是你的问题：线条位于中心，您只希望它转到形状的周长：

<svg width="200" height="200">
  <defs>
    <clipPath id='clipLine'>
      <circle cx='0' cy='0' r="30" />
    </clipPath>
  </defs>
  <rect x='0' y='0' width='200' height='200' fill='rgb(255,128,255)' />
  <line x1="50" y1="50" x2="150" y2="75" stroke='red' stroke-width='2' />
  <g>
    <circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="none" />
    <circle cx="50" cy="50" r="30" stroke="green" stroke-width="4" fill-opacity='0.0' clip-path="url(#clipLine)" />
  </g>
  <g>
    <circle cx="150" cy="75" r="20" stroke="green" stroke-width="4" fill="none" />
    <circle cx="150" cy="75" r="30" stroke="green" stroke-width="4" fill-opacity='0.0' clip-path="url(#clipLine)" />
  </g>
</svg>

---

面具

我学会了如何使用这个答案反转排除 svg
反转设置一个矩形以覆盖整个 svg，并将您正在使用的形状设置为该蒙版的最暗部分以排除它。

<svg width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <mask id='clipLine'>
    <rect height="100%" width="100%" fill="white" />
    <circle id="circle1" cx="50" cy="50" r="28" fill="black" />
    <circle cx="150" cy="75" r="28" stroke="green" stroke-width="4" fill="black" />
  </mask>
  <rect x='0' y='0' width='200' height='200' fill='rgb(255,128,255)' />
  <line x1="50" y1="50" x2="150" y2="75" stroke='red' stroke-width='2' mask="url(#clipLine)" />
  <g>
    <!--use xlink:href="#circle1"/> OUr actual circle-->
    <circle cx="50" cy="50" r="30" stroke="green" stroke-width="4" fill-opacity='0.0' />
  </g>
  <g>
    <circle cx="150" cy="75" r="30" stroke="green" stroke-width="4" fill-opacity='0.0' />
  </g>
</svg>