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命令。

如何使用SVG以编程方式绘制带有圆角的三角形？

1 个答案: