SVG路径内具有笔划宽度的相邻行 [英] Adjacent lines inside svg path with stroke-width

问题描述

我的路径中有多行svg.

<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>

由于笔划宽度，线相交了

有没有什么方法可以使路径连续而不改变"d"?属性?

我对如何在定义笔划宽度的同时如何控制同一路径内的多个对象的联接感兴趣.

如果我要更改"d"属性并删除中间的Z，以使线条形成三角形，笔划问题将消失

解决方案

这是两条直线在某个点相遇的突出结果. (您是否有机会使用Firefox?我最近看到了类似的东西.)

如果要在两个不相交的线段之间进行整齐的连接，最好的选择是在路径元素上添加stroke-linejoin="round"和stroke-linecap="round"来绘制带有圆形端盖的线段.

如果我的怀疑是正确的，则可以通过将fill="orange"更改为fill="none"来解决突出问题.试试这个:

 <svg viewBox="50 50 400 400" width="350" height="350">
  <path stroke-width="13"
        stroke="black"
        fill="none"
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M 100 100 L 300 100 Z L200 300 z"
        />
</svg> 

I have a svg with multiple lines inside a path.

<path stroke-width="13" stroke="black" fill="orange" d="M 100 100 L 300 100 Z L200 300 z"/>

Because of the stroke-width the lines intersect

Is there any way of making the path continuous without altering the "d" attribute?

Edit:

I am interested in how you can control the joins of multiple objects inside the same path while having a stroke-width defined.

If I would change the "d" attribute and remove the middle Z so that the lines form a triangle the stroke problem would disappear

解决方案

That's one hell of an overhang for two lines that meet at a point. (Are you using Firefox by any chance? I saw something very similar recently.)

If you want a neat join between two disjoint line segments, your best bet would be to draw them with rounded end caps by adding stroke-linejoin="round" and stroke-linecap="round" to the path element.

And if my suspicion is correct, you can fix the overhang problem by changing fill="orange" to fill="none". Try this:

<svg viewBox="50 50 400 400" width="350" height="350">
  <path stroke-width="13"
        stroke="black"
        fill="none"
        stroke-linejoin="round"
        stroke-linecap="round"
        d="M 100 100 L 300 100 Z L200 300 z"
        />
</svg>

这篇关于SVG路径内具有笔划宽度的相邻行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！