Javascript 如何在不使用绘制顺序的情况下增加svg路径外的笔划="；笔划；？_Javascript_Svg_Path_Geometry

Javascript 如何在不使用绘制顺序的情况下增加svg路径外的笔划="；笔划；？

javascript svg path geometry

Javascript 如何在不使用绘制顺序的情况下增加svg路径外的笔划="；笔划；？,javascript,svg,path,geometry,Javascript,Svg,Path,Geometry,我在增加笔划宽度时遇到了一个问题。当我使用属性paint order=“stroke”时，它不符合我的要求，因为笔划宽度在两侧（内侧和外侧）都在增加。请查看附件中的图片原始svg：- 实际svg：- 预期的svg（这是我的要求）：- 代码：- <html> <body> <svg height="300" width="500"> <circle cx="5

我在增加笔划宽度时遇到了一个问题。当我使用属性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>

圆形宽度为

20px

的笔划对称位于中心线两侧<代码>10px外圆，内圆10px

顶部圆的半径较小，等于下部圆行程的一半

40-10=30px

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

将圆变大，然后您可以使用所需的笔划宽度。是的，对于圆，它可以工作，但是如果svg包含路径instade，解决方案是什么circle@karmarout你在问题中举了一个带圆圈的例子。接受这个问题并用path问一个新问题会很好