时间戳

首页 > 解决方案 > 如何使用 SVG 以编程方式绘制一个带圆角的三角形？

html - 如何使用 SVG 以编程方式绘制一个带圆角的三角形？

问题描述

我正在尝试使用 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 只舍入一点？

标签： htmlsvg

解决方案

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

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

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% 来更改拐角曲线的形状。

如果您在拐角处需要更精确的圆弧，那么您将需要改用Aora命令。

推荐阅读