带有 CSS jquery 或 javascript 的双弧形答案

【问题标题】：Double arc shape with CSS jquery or javascript带有 CSS jquery 或 javascript 的双弧形
【发布时间】：2023-03-05 07:22:01
【问题描述】：

如何创建这样的弧形：

使用 CSS 或 jquery 或 javascript

【问题讨论】：

单独使用 CSS 是不可能的。考虑使用 HTML5 canvas 元素：developer.mozilla.org/en/Drawing_Graphics_with_Canvas，结合 Javascript。
我已经在使用画布创建背景，但我需要其中 8 个具有自定义内容的形状，并且它们都需要旋转。所以我真的认为使用 CSS 或 javascript 会更好。
你也可以看看 SVG。

标签： javascript jquery css svg css-shapes

【解决方案1】：

您甚至不需要 CSS/JS 来绘制它。只需使用 <svg> 元素即可。

<svg width="270" height="120">
    <path
       d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
       stroke-width="3"
       stroke="#A5423A"
       fill="none"
    />
</svg>

【讨论】：

谢谢老兄，这个是你自己做的，还是有某种生成器？
我使用了一个名为 Inkscape 的程序来绘制它，然后将文件保存为 SVG。然后我在 Notepad++ 中打开文件以获取<path> 标签信息。
好吧，我试试看，因为我没有使用真实的形状
如果生成A 曲线而不是使用C 贝塞尔曲线会更好。

【解决方案2】：

您可以为此使用 SVG。您可以使用arc path command。

正如您的评论所述，您希望将内容放置在弧内并且希望它们旋转。

文本或图像等内容可以放在 svg 中。可以使用transform=rotate(..) 实现旋转。

如果您想使用 SVG 制作更多动画，可以查看 D3.js。如果你只是想创建一些弧线，你可以自己做数学来计算 SVG 路径字符串。

【讨论】：

【解决方案3】：

@AlliterativeAlice 是正确的。

但是对于这个形状，我会使用两条弧线而不是很多 C 路径。我也更喜欢使用相对路径而不是绝对路径。

所以我的解决方案使用了弧线和直线，而不仅仅是贝塞尔曲线。

<svg width="300px" height="300px" viewBox="0 0 100 100">
  <path d="m 10,60 
          a 50 50 0 0 1 80,0
          l -10,10
          a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>

【讨论】：

您需要保留半径比 (rx/ry) 否则会产生不平行的弧线
@TimKrul 它几乎总是会创建不平行的弧线，因为起点和终点对弧线的显示方式有发言权。已修复，因此它看起来尽可能平行。
你需要将底部圆弧的半径按相同比例减小，并按line命令的长度减小，或者10。这样：如果顶部圆弧半径为50 50，则底部圆弧半径为40 40.jsfiddle.net/cLgowtry
这里可以计算行的长度，但是如果它在哪里我将如何计算它：jsfiddle.net/pw6d58et？
说实话，我认为它应该减少 10 * sqrt(2)。那么我们将得到一个真正平行的弧。