小编Hex*_*mal的帖子

不使用 CSS 或 JS 创建 SVG 饼图的数学

我正在寻求用纯 SVG 创建饼图。我不想使用 JS 或 CSS,而该网站上的大多数解决方案都使用它们。我发现了这篇很棒的文章,解释了如何在纯 SVG 中创建饼图:https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart

\n

问题是这篇文章只描述了如何制作一片。我正在寻求创建一个最多可以包含 360 个元素的饼图(其中饼图的每个切片将是 \xe2\x80\xad0.27\xe2\x80\xac% )。

\n

我尝试在以下示例中通过将其旋转到 -89 而不是 -90 来创建另一个楔子,但我没有得到我正在寻找的结果:https: //codepen.io/HexylCinnamal/pen /KKwEjpK

\n

\r\n
\r\n
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 20 20">\n    <circle r="10" cx="10" cy="10" fill="transparent"/>\n    <circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10"\n        stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-90) translate(-20)"/>\n    <circle r="5" cx="10" cy="10" fill="transparent" stroke="blue" stroke-width="10"\n        stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-89) translate(-20)"/>\n</svg>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

我想知道是否需要做任何数学计算来计算正确的角度和平移,以使蓝色楔形出现在红色楔形旁边。

\n

html math charts geometry svg

3
推荐指数
1
解决办法
2183
查看次数

标签 统计

charts ×1

geometry ×1

html ×1

math ×1

svg ×1