主页 / 问题 / 1306826
Accepted
Leonid
Asked:2022-07-20 02:23:35 +0000 UTC2022-07-20 02:23:35 +0000 UTC

通过 <path> SVG 画圆的最简单方法是什么？

  • 772

SVG 中的路径是一个通用且强大的工具。但是要在其中画出一个像圆形这样的图形并不是一件容易的事。似乎有A（弧），但我个人能够画一个只有两条弧的圆。在这种情况下，圆心不在任何地方表示；它位于这些弧的端点的中间。我添加了一条白线进行控制。

<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M40 100 A 50 50 0 0 1 140 100
                     A 50 50 0 0 1 40 100"
       stroke="black" fill="rgb(180,180,255)"/>        
    <line x1="40" y1="100" x2="140" y2="100" stroke="white"/>
</svg>

您可以使用两个三次贝塞尔曲线绘制一个圆。在我的情况下大约是一个圆圈））

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <path d="M40 100 C 40 34 140 34 140 100
                     C 140 166 40 166 40 100"
       stroke="black" fill="rgb(180,180,255)"/>        
    <line x1="40" y1="100" x2="140" y2="100" stroke="white"/>
</svg>

有没有更简单的方法来画一个圆，只用一条线path，让它由一条曲线组成？

svg

2 个回答

  1. Best Answer

    同意@Alexey Ten的评论

    不，或者我不知道。两条弧线是我见过的最简单也最容易理解的

    我会回答完全一样的。
    这个问题的动机是可以理解的，因为animateMotion例如 不能与 一起使用circle，而只能与 一起使用path，它实现了圆形的形状。

    我不知道使用矢量编辑器是否会更容易解决

    所以一步一步：

    • 例如，在矢量编辑器中，Inkscape选择侧面菜单中的工具 -绘制圆、椭圆并按住 shift 从中心绘制一个圆。保存文件并复制公式path

    但是，你永远无法画出一个完美的圆，它至少会有一个小椭圆形状，不同rx和ry

    另一种方式

    • 使用所需的中心坐标和圆半径大小编写一个 svg 文件

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
    <circle cx="150" cy="150" r="100" fill="none" stroke="black" />  
</svg>

    • 将此文件加载到矢量编辑器中，然后在顶部菜单中选择
      大纲/大纲对象- 以 SVG 格式保存文件，复制路径Shift + Ctrl + C

    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
  <path fill="none" stroke="black" stroke-width="2" d="M150 50C95 50 50 95 50 150 50 205 95 251 150 251 205 251 251 205 251 150 251 95 205 50 150 50zM150 51C205 51 250 95 250 150 250 205 205 250 150 250 95 250 51 205 51 150 51 95 95 51 150 51z"/>
</svg>

    • 3

  2. 如果将起点指定为终点，则不会以任何方式绘制圆。但是你可以稍微改变一下））在这种情况下，60 --> 60.00001 并且一切正常。你可以用一个圆弧画一个圆。

    由于打开的图形仍然是填充的，因此结果几乎是完美的，肉眼无法完全区分。开放圆的可能负面后果可以通过z路径字符串末尾的关闭指令来平衡。它不会影响显示，但是在矢量编辑器中，可以肯定的是，用颜色填充是正常的（没有完美闭合的轮廓，会出现填充错误）。

    为了更好地理解，我用红点标记了弧的开始（以及几乎结束）。

    <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M60 110 A 50 50 0 1 1 60.00001 110 z"
       stroke="black" fill="rgb(180,180,255)"/> 
    <circle cx="60" cy="110" r="3" fill="red"/>
</svg>

    • 0

相关问题