如何增加svg路径外的笔画而不用画图顺序=“笔画”？
如何增加svg路径外的笔画而不用画图顺序=“笔画”？
提问于 2020-12-10 14:53:37
我在增加行程宽度的同时也面临着一个问题。当我使用属性画图-order=“行程”时，它不符合我的要求，因为两边(内外)的笔画宽度都在增加。请查看附件中的图片。
原始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>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-10 18:08:47
圆周宽度为20px的笔画对称地位于中心线的两侧。10px在外面，10 the在圆圈内
顶部的圆圈半径较小，相当于下圆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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65236866
复制相关文章
相似问题
腾讯云开发者
