css 如何做一个svg圆，圆的边缘分为3部分？

zbdgwd5y 于 2023-02-20 发布在其他

关注(0)|答案(2)|浏览(486)

我正在尝试创建一个圆，只有它的边缘，分为3部分。
我尝试的结果是：

不太好，我想做的是让这3部分组合在一起形成一个圆的边缘，同时在每个部分之间留有一些空间（如您在左侧所见，该间隙是它应该看起来的样子）
我使用svg和3个路径来完成此操作：

<svg viewBox="0 0 100 100">
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0%" stop-color="#56c4fb" />
      <stop offset="100%" stop-color="#0baeff" />
    </linearGradient>
    <path className="grey" d="M50,90 A30,25 0 0,1 10,90" fill="none" />
    <path className="grey" d="M5,80 A30,25 0 0,1 20,50" fill="none" />
    <path className="grey" d="M50,50 A30,25 0 0,1 80,90" fill="none" />
  </svg>

在这种情况下，为了创建不同的路径，手动计算是不是要走的路？对我来说，复杂的是必须考虑到每个部分之间的小间隙（正如你可以看到左边差距，这是它应该如何绘制）
什么是最简单的方法来计算3条路径的坐标，使他们形成一个圆圈从3普拉特之间的小差距？

css

来源：https://stackoverflow.com/questions/75458793/how-to-make-an-svg-circle-with-edge-divided-into-3-parts

2条答案

按热度按时间

7hiiyaii1#

在CSS中几乎完全可以做到这一点：画一个圆（或者按照你的例子，画一个椭圆），定义一个属性pathLength，以便在CSS中进一步使用，然后创建一个stroke-dasharray，将笔划平均分为三个虚线和三个间隙。
在此示例中，总路径长度被视为30。虚线长度7和间隔长度3相加为10，因此可以重复三次以获得总周长。如果要将笔划划分为长度不均匀的虚线，则虚线阵列可以包含每个虚线的单独长度，如下所示-不均匀的位置为虚线，偶数位置之间为间隔：

stroke-dasharray: 7 3 9 3 5 3;

第一条虚线从右侧开始向下，stroke-dashoffset为正数时，起点逆时针移动。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-20

js4nwp542#

可以做，例如，在菲格马？

<svg width="411" height="410" viewBox="0 0 411 410" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M389 205C389 229.032 384.267 252.828 375.07 275.031C365.873 297.234 352.394 317.407 335.401 334.401C318.407 351.394 298.234 364.873 276.031 374.07C253.828 383.267 230.032 388 206 388"
        stroke="black"
        stroke-width="44"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M114.5 46.5174C135.312 34.5014 158.287 26.7024 182.114 23.5656C205.94 20.4288 230.151 22.0157 253.364 28.2356C276.577 34.4555 298.338 45.1866 317.403 59.8163C336.469 74.446 352.467 92.6878 364.483 113.5"
        stroke="black"
        stroke-width="44"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M114.483 363.465C93.6704 351.449 75.4287 335.452 60.799 316.386C46.1693 297.32 35.4382 275.56 29.2182 252.347C22.9983 229.134 21.4115 204.923 24.5483 181.096C27.6851 157.27 35.4841 134.295 47.5 113.483"
        stroke="black"
        stroke-width="44"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

展开查看全部

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何做一个svg圆，圆的边缘分为3部分？

2条答案

相关问题

热门标签

最新问答