如何用SVG创建这个半圆?

问题描述 投票:0回答:1

我尝试了下面的代码,但它看起来太复杂,并且当我在网络上显示它时存在兼容性问题。

如何在 SVG 中制作上述形状?也许只需要一个路径元素,而不需要旋转它。

  <svg
       width="28.149193mm"
       height="47.310486mm"
       viewBox="0 0 28.149193 47.310486"
       version="1.1"
       id="svg5"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:svg="http://www.w3.org/2000/svg">
      <defs
         id="defs2" />
      <g
         id="layer1"
         transform="translate(-45.804437,-101.49194)">
        <path
           style="fill:#000000;stroke:#ff0000;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"
           id="path346"
           d="m -147.30242,72.453629 a 22.155243,25.149193 0 0 1 22.15524,-25.149193 22.155243,25.149193 0 0 1 22.15524,25.149193 h -22.15524 z"
           transform="rotate(-90)" />
      </g>
    </svg>

svg geometry drawing
1个回答
0
投票

创建半圆可能有不同的方法,具体取决于它的用途。

这是初始代码的“副本”,其路径具有圆弧 (a) 和闭合 (Z):

<svg
  width="28.149193mm"
  height="47.310486mm"
  viewBox="0 0 26.5 50"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <path
    fill="#000000" stroke="#ff0000" stroke-width="3"
    d="M 25 1.5 a 1 1 0 0 0 0 47 Z" />
</svg>

© www.soinside.com 2019 - 2024. All rights reserved.