Question

我正在尝试创建一个277度的SVG饼图。 我有一些代码可以创建一个看起来正确的饼图，但我不确定我的代码是否首先正确（在正确的位置）＆amp;我是否可以改进它。

左边是我试图重新创建的饼图，右边是我的代码输出： enter image description here

我有一种感觉，我的尝试有一个向右太远的中心点（两条线相交的地方）。圆圈的意思是277度。我的代码是否正确＆amp;如果不是什么可以修复 - 我需要改变什么？什么价值？

<svg width="400" height="400">
    <path d="M200,200 h-150,-20 a150,150 0 1,0 150,-150 z"
     fill="red" stroke="blue" stroke-width="5" />
</svg>

PS：是否可以为SVG提供一个度数值，因为只要说“填充到277度”而不是使用trig作为实际点等就更容易了。

Answer 1

正确的路径（运行以查看结果）

<svg width="400" height="400" id='pie'>
    <path d="M200,200 L187,100 A100,100 1 1,1 100,200 z"
     fill="red" stroke="blue" stroke-width="2" />
</svg>

Answer 2

我想提供一些“弧形”和“饼图”答案的替代方案。您可以绘制一个简单的弧，然后将其旋转到位（以度为单位）。没有计算坐标。没有插件或实用程序。

在我的例子中，我正在创造一个完整的馅饼。所以首先创造了一个最大的圆圈。接下来创建简单的90度弧作为其他饼段。变换并旋转圆弧以切断前一个圆弧。最后，创建一个片断以切断最后（最小）的片段。

在这个例子中，我故意将黄色的segemnt缩短以允许红色圆圈显示出来。我可以很容易地添加第二个四分之一的馅饼或黄色半个馅饼（因为它大于90度）。此外，如果第一件小于90度，您可以预先计算最后一件小于第一件。在绘制饼图时，我觉得我总是会有一个很大的部分，我可以排在第一位。

在你的情况下，我可以看到这是两个半饼。一个留在原地，另一个旋转到你需要的任何角度。

我希望这很有用。

    <!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
  <title>Create Pie Chart</title>
  <style type="text/css" media="screen">
    svg {
      display:block; border:2px solid #00c; position:relative;
      top:0%; left:0%; width:100%; height:100%; background:#fff;
    }
  </style>

</head><body>

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="300" cy="200" r="150" fill="red" stroke="black" stroke-width="1" />

<path id= "a1" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="black" stroke-width="1" transform="rotate(180 300 200)"/>
<path id= "a2" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="blue" stroke="black" stroke-width="1" transform="rotate(220 300 200)"/>
<path id= "a3" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="green" stroke="black" stroke-width="1" transform="rotate(237 300 200)"/>
<path id= "a4" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="maroon" stroke="black" stroke-width="1" transform="rotate(320 300 200)"/>
<path id= "a5" d="M300,200 v-150 a150,150 0 0,0 -150,150 z"
        fill="red" transform="rotate(400 300 200)"/>

</svg>

<script>

c = 360;

c -= 160;
 document.getElementById('a1').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 100;
 document.getElementById('a2').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 50;
 document.getElementById('a3').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 30;
 document.getElementById('a4').setAttribute("transform", "rotate(" + c + " 300 200)");

c -= 20;
 document.getElementById('a5').setAttribute("transform", "rotate(" + c + " 300 200)");

</script>
</body></html>

SVG饼图：如何绘制不规则大小的饼图

2 个答案:

正确的路径（运行以查看结果）