如何使用 SVG 以编程方式绘制一个圆角三角形?

Question

我正在尝试使用 SVG 绘制三角形，并使三角形的顶点或底点变圆。我可以画三角形，但我不能在一个点上应用圆角效果。

我有三角形向上的情况，所以我需要将顶部点四舍五入，而三角形是倒置的情况，所以我需要将底部的点四舍五入。我正在尝试使用q但我得到了奇怪的结果。

<p>Triangle</p>
<svg height="200" width="200" style="margin: 20px">
<path d="M69 10 
q5,-2.5 -15,10
L10 100 
L128 100    
Z" 
fill="LightBlue" 
stroke="Blue" 
stroke-width="15" />
</svg>
<svg height="200" width="200" style="margin: 20px">
<path d="M36 10 
L10 50 
L64 50    
Z" 
fill="LightBlue" 
stroke="Blue" 
stroke-width="10" />
</svg>

<p>Triangle upside down</p>
<svg height="220" width="200" style="margin: 20px">
<path 
d="M 10 10
L 128 10 
L 69 100   
z"
fill="LightBlue" 
stroke="Blue" 
stroke-width="10" />
</svg>
<svg height="220" width="200" style="margin: 20px">
<path 
d="M 10 10
L 64 10 
L 36 50   
q5,-2.5 -5,0           
z"
fill="LightBlue" 
stroke="Blue" 
stroke-width="10" />
</svg>

如何使用 SVG 只对一个点进行四舍五入？

Answer 1

有几种方法可以做到这一点，具体取决于您想要哪种曲线。 最简单的方法可能是在尝试时使用Q/q。

通过计算沿该线段的位置来计算进入和退出曲线的端点。 例如，在第二个 SVG 中，我沿第一行 (20,120 -> 70,20( 选择了 80% 的点。

x = x0 + 80% * (x1 - x0)
= 20 + 80% * (70 - 20)
= 60
y = y0 + 80% * (y1 - y0)
= 120 + 80% * (20 - 120)
= 120 + -80
= 40

退出弯角的线也是如此。当然，这次它离角落只有20%的距离。

获得这两个点后，只需在 Q 命令中使用原始角点作为控制点(第一个坐标对(。

所以原来的角落

M 20,120
L 70,20
L 120,120

成为

M 20 120
L 60 40
Q 70 20 80 40
L 120 120

如下面的第三个 SVG 所示。

<p>Triangle</p>
<svg height="200" width="200" style="margin: 20px">
<path d="M 20 120
L 70 20
L 120 120    
Z" 
fill="LightBlue" 
stroke="Blue" 
stroke-width="10" />
</svg>
<svg height="200" width="200" style="margin: 20px">
<path d="M 20 120
L 60 40
L 80 40
L 120 120    
Z" 
fill="LightBlue" 
stroke="Blue" 
stroke-width="10" />
</svg>
<svg height="200" width="200" style="margin: 20px">
<path d="M 20 120
L 60 40
Q 70 20 80 40
L 120 120    
Z" 
fill="LightBlue" 
stroke="Blue" 
stroke-width="10" />
</svg>

您可以通过将该线调整因子调整为大于或小于 80% 来更改拐角曲线的形状。

如果您需要在拐角处使用更准确的圆弧，则需要切换到使用A或a命令。