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排除Invert-svg
設置rect以覆蓋整個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>