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>

---

面具

我学会了如何使用这个答案 Invert-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>