SVG椭圆弧答案

【问题标题】：SVG elliptical arcSVG椭圆弧
【发布时间】：2020-09-21 19:08:07
【问题描述】：

我一直在努力解决这个问题，我正在尝试绘制椭圆弧来填充红色圈出的空间，我可以提供一些示例代码吗？

编辑：

由于形状是使用 JavaScript 生成的，我将添加从浏览器生成的 SVG 元素：

<svg width="500" height="500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">

    <path d="M 375,300 a 1 1 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>

    <path id="__currentVal__" d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="skyblue"></path>
</svg>

蓝色的形状将是id为__currentVal__的元素，椭圆弧命令将插入到命令的末尾M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212

预期的输出将是这样的（使用 MS Paint 编辑）：

【问题讨论】：

1：如果您“一直在努力解决这个问题”，那么您将拥有读者可以评估的代码，所以请发布它。 2：对教程或文档之类的请求在帮助中心中被定义为 Stack Overflow 的题外话。
首先请试试这个：<svg viewBox="0 0 100 100" width="200"> <circle cx="50" cy="50" r="45" fill="#ddd"/> <path d="M50,50 L5,50 A45,45 0 0 1 27.5,11.028 L50,50z" fill="skyblue"/> </svg>
看看路径的d属性。这是绘制圆弧的部分：A45,45 0 0 1 27.5,11.028 其中 45 是圆的半径，27.5,11.028 是圆弧结束点的 x 和 y 坐标。在这种情况下，弧线从前一行的最后一点 (5,50) 开始。为了能够帮助你，我需要知道弧的半径，起点和终点。 请编辑您的问题并添加这些值
@underscore_d 我只有绘制蓝色三角形的代码，我不知道如何绘制简单的椭圆弧，但我会用代码重新编辑问题，谢谢。
@enxaneta 所有坐标都是使用 JavaScript 随机生成的，也许我尝试用浏览器生成的内容来编辑问题，谢谢。

标签： svg

【解决方案1】：

这是您使用的 d 属性：d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 "

M 75,300 表示您正在移动到点 x:75, y:300。

由于您使用的是小写命令，因此这些命令是相对命令。例如l 150,0 表示您将 x 中的 150 个单位从 75 移动到 225。y 不变意味着 y:300。圆弧的中心在这个点：x:225,y:300。

这部分命令也是让我知道圆弧的半径是150。

接下来的路径 (l -106.06601717798213,-106.06601717798212) 从上一点 x:225 y:300 到点 x:225-106.06601717798213 = 118.93398282201787, y:300-106.06601717798212 = 193.933982822017

我正在画一个小圆圈来可视化这一点（x:118.93398282201, y:193.93398282201787）。弧线将从这里开始。我还在 x:75,y:300 点画了另一个小圆圈。弧线将在此结束。现在我可以画圆弧了：M118.93398282201,193.93398282201787 A 150,150 0 0 0 75,300

<svg  viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">

    <path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>

    <path id="__currentVal__"d="M 75,300 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" ></path>
  
  <circle cx="75" cy="300" r="5"/>
  <circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
  
  
 <path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300" />
</svg>

如果您碰巧需要在与实际蓝色三角形相同的路径中绘制圆弧，您可以这样做：您从圆弧开始您的路径，然后使用路径的 d 属性而不使用第一个（移动到）命令。你不需要移动到这一点，因为你已经在那里（弧线在这一点结束）

<svg  viewBox="0 0 500 500" style="background-color: white; padding: 0px 10px; user-select: none;" id="chart">

    <path d="M 375,300 a 150 150 0 0 0 -300 0" stroke="lightgray" fill="lightgray"></path>

   
  
  <circle cx="75" cy="300" r="5"/>
  <circle cx="118.93398282201" cy="193.93398282201787" r="5"/>
  
  
 <path d="M118.93398282201,193.93398282201787A150,150 0 0 0 75,300
 l 150,0 l -106.06601717798213,-106.06601717798212 " stroke="skyblue" fill="none" />
</svg>

您可以删除我作为助手绘制的那两个小圆圈，让我可视化您的路径点。

【讨论】：

多么详细的答案！非常感谢您对这个问题的回答！