如何在不使用 paint-order="stroke" 的情况下增加 svg 路径之外的笔划？

Question

我在增加笔划宽度时遇到问题。当我使用属性 paint-order="stroke" 时，它不符合我的要求，因为两侧（内部和外部）的笔触宽度都在增加。请查看所附图片。

原始 svg :-

实际 svg :-

预期的 svg（这是我的要求）：-

代码：-

 <html>
    <body>
    
    <svg height="300" width="500">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="red" />
      
      <circle cx="152" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="none" />
      
      <circle cx="252" cy="50" r="40" stroke="black" stroke-width="10" paint-order="stroke" fill="none" />
      
    </svg> 
     
    </body>
</html>

Answer 1

一个圆的宽度为20px的笔画对称地位于中心线的两侧。 10px外圈，内圈10px

顶部圆的半径较小，等于下方圆行程的一半40 - 10 = 30px

因此，下部较大圆圈的笔划内侧将被隐藏。只有大圆圈的外侧可见。

<html>
    <body>
    
    <svg height="300" width="500">
            
          <!-- Sample circle without overlap      -->
     <circle cx="52" cy="50" r="40" stroke="black" stroke-width="20" paint-order="stroke" fill="none" /> >
      
      <circle cx="152" cy="50" r="40" stroke="blue" stroke-width="20" paint-order="stroke" fill="none" />
          <!-- The circle at the top has a smaller radius equal to half the stroke of the lower circle    -->
     <circle cx="152" cy="50" r="30" stroke="white" stroke-width="20" paint-order="stroke" fill="none" />
      
    </svg> 
     
    </body>
</html>

如何在不使用 paint-order="stroke" 的情况下增加 svg 路径之外的笔划？

How to increase stroke outside of svg path without using paint-order="stroke"?

javascript

geometry

svg

path