blocks|key|707120|text|在@wdebeaum的很好的答案的基础上，这里有一个生成弧形路径的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707121|function+polarToCartesian(centerX,+centerY,+radius,+angleInDegrees)+{
++var+angleInRadians+=+(angleInDegrees-90)+*+Math.PI+/+180.0;

++return+{
++++x:+centerX+%2B+(radius+*+Math.cos(angleInRadians)),
++++y:+centerY+%2B+(radius+*+Math.sin(angleInRadians))
++};
}

function+describeArc(x,+y,+radius,+startAngle,+endAngle){

++++var+start+=+polarToCartesian(x,+y,+radius,+endAngle);
++++var+end+=+polarToCartesian(x,+y,+radius,+startAngle);

++++var+largeArcFlag+=+endAngle+-+startAngle+<=+180+?+"0"+:+"1";

++++var+d+=+[
++++++++"M",+start.x,+start.y,+
++++++++"A",+radius,+radius,+0,+largeArcFlag,+0,+end.x,+end.y
++++].join("+");

++++return+d;+++++++
}|code-block|syntax|javascript|707122|要使用|707123|document.getElementById("arc1").setAttribute("d",+describeArc(200,+400,+100,+0,+180));|707124|在你的html中|707125|<path+id="arc1"+fill="none"+stroke="#446688"+stroke-width="20"+/>|707126|Live+demo|offset|length|707127|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/quhujowota/1/edit?html,js,output^0|0|0|0|0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Expanding on @wdebeaum's great answer, here's a method for generating an arced path:    </p>

<pre><code>function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle &lt;= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}
</code></pre>

<p>to use</p>

<pre><code>document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));
</code></pre>

<p>and in your html</p>

<pre><code>&lt;path id="arc1" fill="none" stroke="#446688" stroke-width="20" /&gt;
</code></pre>

<p><a href="http://jsbin.com/quhujowota/1/edit?html,js,output">Live demo</a></p>


blocks|key|923557|text|wdebeaum的原始polarToCartesian函数是正确的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923558|var+angleInRadians+=+angleInDegrees+*+Math.PI+/+180.0;|code-block|syntax|javascript|923559|使用以下命令反转起点和终点：|923560|var+start+=+polarToCartesian(x,+y,+radius,+endAngle);
var+end+=+polarToCartesian(x,+y,+radius,+startAngle);|923561|是令人困惑的(对我来说)，因为这将颠倒扫描标志。使用：|923562|var+start+=+polarToCartesian(x,+y,+radius,+startAngle);
var+end+=+polarToCartesian(x,+y,+radius,+endAngle);|923563|使用sweep-flag+=+"0“可以绘制”正常的“逆时针方向的弧线，我认为这更直接。请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths|offset|length|923564|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths^0|0|0|0|0|0|0|1B|1R|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>The orginal polarToCartesian function by wdebeaum is correct:</p>

<pre><code>var angleInRadians = angleInDegrees * Math.PI / 180.0;
</code></pre>

<p>Reversing of start and end points by using:</p>

<pre><code>var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
</code></pre>

<p>Is confusing (to me) because this will reverse the sweep-flag. Using:</p>

<pre><code>var start = polarToCartesian(x, y, radius, startAngle);
var end = polarToCartesian(x, y, radius, endAngle);
</code></pre>

<p>with the sweep-flag = "0" draws "normal" counter-clock-wise arcs,
which I think is more straight forward.
See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a></p>


blocks|key|923678|text|我想评论@Ahtenus+answer，特别是Ray+Hulha的评论，说codepen没有显示任何弧线，但我的声誉还不够高。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923679|这个代码不能工作的原因是它的html是错误的，它的笔划宽度是零。|923680|我修复了它，并在这里添加了第二个示例：http://codepen.io/AnotherLinuxUser/pen/QEJmkN。|offset|length|923681|html：|923682|<svg>
++++<path+id="theSvgArc"/>
++++<path+id="theSvgArc2"/>
</svg>|code-block|syntax|javascript|923683|相关的CSS：|923684|svg+{
++++width++:+500px;
++++height+:+500px;
}

path+{
++++stroke-width+:+5;
++++stroke+++++++:+lime;
++++fill+++++++++:+#151515;
}|923685|javascript：|923686|document.getElementById("theSvgArc").setAttribute("d",+describeArc(150,+150,+100,+0,+180));
document.getElementById("theSvgArc2").setAttribute("d",+describeArc(300,+150,+100,+45,+190));|923687|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/AnotherLinuxUser/pen/QEJmkN^0|0|0|J|19|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|H|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1B|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1F|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>I wanted to comment on @Ahtenus answer, specifically on Ray Hulha comment saying the codepen does not show any arc, but my reputation is not high enough.</p>

<p>The reason for this codepen not working is that its html is faulty with a stroke-width of zero.</p>

<p>I fixed it and added a second example here : <a href="http://codepen.io/AnotherLinuxUser/pen/QEJmkN" rel="nofollow">http://codepen.io/AnotherLinuxUser/pen/QEJmkN</a>.</p>

<p>The html :</p>

<pre><code>&lt;svg&gt;
    &lt;path id="theSvgArc"/&gt;
    &lt;path id="theSvgArc2"/&gt;
&lt;/svg&gt;
</code></pre>

<p>The relevant CSS :</p>

<pre><code>svg {
    width  : 500px;
    height : 500px;
}

path {
    stroke-width : 5;
    stroke       : lime;
    fill         : #151515;
}
</code></pre>

<p>The javascript :</p>

<pre><code>document.getElementById("theSvgArc").setAttribute("d", describeArc(150, 150, 100, 0, 180));
document.getElementById("theSvgArc2").setAttribute("d", describeArc(300, 150, 100, 45, 190));
</code></pre>


blocks|key|707372|text|对@opsb的回答稍作修改。我们不能用这种方法画一个完整的圆。也就是说，如果我们给(0,360)，它根本不会画出任何东西。所以稍微修改一下就可以解决这个问题。显示有时达到100%25的分数可能很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707373|function+polarToCartesian(centerX,+centerY,+radius,+angleInDegrees)+{
++var+angleInRadians+=+(angleInDegrees-90)+*+Math.PI+/+180.0;

++return+{
++++x:+centerX+%2B+(radius+*+Math.cos(angleInRadians)),
++++y:+centerY+%2B+(radius+*+Math.sin(angleInRadians))
++};
}

function+describeArc(x,+y,+radius,+startAngle,+endAngle){

++++var+endAngleOriginal+=+endAngle;
++++if(endAngleOriginal+-+startAngle+===+360){
++++++++endAngle+=+359;
++++}

++++var+start+=+polarToCartesian(x,+y,+radius,+endAngle);
++++var+end+=+polarToCartesian(x,+y,+radius,+startAngle);

++++var+arcSweep+=+endAngle+-+startAngle+<=+180+?+"0"+:+"1";

++++if(endAngleOriginal+-+startAngle+===+360){
++++++++var+d+=+[
++++++++++++++"M",+start.x,+start.y,+
++++++++++++++"A",+radius,+radius,+0,+arcSweep,+0,+end.x,+end.y,+"z"
++++++++].join("+");
++++}
++++else{
++++++var+d+=+[
++++++++++"M",+start.x,+start.y,+
++++++++++"A",+radius,+radius,+0,+arcSweep,+0,+end.x,+end.y
++++++].join("+");
++++}

++++return+d;+++++++
}

document.getElementById("arc1").setAttribute("d",+describeArc(120,+120,+100,+0,+359));|code-block|syntax|javascript|707374|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A slight modification to @opsb's answer. We cant draw a full circle with this method. ie If we give (0, 360) it will not draw anything at all. So a slight modification made to fix this. It could be useful to display scores that sometimes reach 100%.</p>

<pre><code>function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var endAngleOriginal = endAngle;
    if(endAngleOriginal - startAngle === 360){
        endAngle = 359;
    }

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var arcSweep = endAngle - startAngle &lt;= 180 ? "0" : "1";

    if(endAngleOriginal - startAngle === 360){
        var d = [
              "M", start.x, start.y, 
              "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "z"
        ].join(" ");
    }
    else{
      var d = [
          "M", start.x, start.y, 
          "A", radius, radius, 0, arcSweep, 0, end.x, end.y
      ].join(" ");
    }

    return d;       
}

document.getElementById("arc1").setAttribute("d", describeArc(120, 120, 100, 0, 359));
</code></pre>


blocks|key|707418|text|@opsb的答案很简洁，但中心点并不准确，而且，正如@Jithin指出的那样，如果角度为360，则根本不会绘制任何内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707419|@Jithin修复了360度的问题，但如果你选择了小于360度，那么你会得到一条闭合弧圈的线，这不是必需的。|707420|我修复了这个问题，并在下面的代码中添加了一些动画：|707421|​|707422|function+myArc(cx,+cy,+radius,+max){+++++++
+++++++var+circle+=+document.getElementById("arc");
++++++++var+e+=+circle.getAttribute("d");
++++++++var+d+=+"+M+"%2B+(cx+%2B+radius)+%2B+"+"+%2B+cy;
++++++++var+angle=0;
++++++++window.timer+=+window.setInterval(
++++++++function()+{
++++++++++++var+radians=+angle+*+(Math.PI+/+180);++//+convert+degree+to+radians
++++++++++++var+x+=+cx+%2B+Math.cos(radians)+*+radius;++
++++++++++++var+y+=+cy+%2B+Math.sin(radians)+*+radius;
+++++++++++
++++++++++++d+%2B=+"+L+"%2Bx+%2B+"+"+%2B+y;
++++++++++++circle.setAttribute("d",+d)
++++++++++++if(angle==max)window.clearInterval(window.timer);
++++++++++++angle%2B%2B;
++++++++}
++++++,5)
+}+++++

++myArc(110,+110,+100,+360);|code-block|syntax|javascript|707423|<svg+xmlns="http://www.w3.org/2000/svg"+style="width:220;+height:220;">+
++++<path+d=""+id="arc"+fill="none"+stroke="red"+stroke-width="2"+/>
</svg>|707424|707425|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>@opsb's answers is neat, but the center point is not accurate, moreover, as @Jithin noted, if the angle is 360, then nothing is drawn at all.</p>

<p>@Jithin fixed the 360 issue, but if you selected less than 360 degree, then you'll get a line closing the arc loop, which is not required.</p>

<p>I fixed that, and added some animation in the code below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function myArc(cx, cy, radius, max){       
       var circle = document.getElementById("arc");
        var e = circle.getAttribute("d");
        var d = " M "+ (cx + radius) + " " + cy;
        var angle=0;
        window.timer = window.setInterval(
        function() {
            var radians= angle * (Math.PI / 180);  // convert degree to radians
            var x = cx + Math.cos(radians) * radius;  
            var y = cy + Math.sin(radians) * radius;
           
            d += " L "+x + " " + y;
            circle.setAttribute("d", d)
            if(angle==max)window.clearInterval(window.timer);
            angle++;
        }
      ,5)
 }     

  myArc(110, 110, 100, 360);
    </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="width:220; height:220;"&gt; 
    &lt;path d="" id="arc" fill="none" stroke="red" stroke-width="2" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|923836|text|基于所选答案的ReactJS组件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923837|import+React+from+'react';

const+polarToCartesian+=+(centerX,+centerY,+radius,+angleInDegrees)+=>+{
++++const+angleInRadians+=+(angleInDegrees+-+90)+*+Math.PI+/+180.0;

++++return+{
++++++++x:+centerX+%2B+(radius+*+Math.cos(angleInRadians)),
++++++++y:+centerY+%2B+(radius+*+Math.sin(angleInRadians))
++++};
};

const+describeSlice+=+(x,+y,+radius,+startAngle,+endAngle)+=>+{

++++const+start+=+polarToCartesian(x,+y,+radius,+endAngle);
++++const+end+=+polarToCartesian(x,+y,+radius,+startAngle);

++++const+largeArcFlag+=+endAngle+-+startAngle+<=+180+?+"0"+:+"1";

++++const+d+=+[
++++++++"M",+0,+0,+start.x,+start.y,
++++++++"A",+radius,+radius,+0,+largeArcFlag,+0,+end.x,+end.y
++++].join("+");

++++return+d;
};

const+path+=+(degrees+=+90,+radius+=+10)+=>+{
++++return+describeSlice(0,+0,+radius,+0,+degrees)+%2B+'Z';
};

export+const+Arc+=+(props)+=>+<svg+xmlns="http://www.w3.org/2000/svg"+viewBox="0+0+300+300">
++++<g+transform="translate(150,150)"+stroke="#000"+strokeWidth="2">
++++++++<path+d={path(props.degrees,+props.radius)}+fill="#333"/>
++++</g>

</svg>;

export+default+Arc;|code-block|syntax|javascript|923838|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>ReactJS component based on the selected answer:</p>

<pre><code>import React from 'react';

const polarToCartesian = (centerX, centerY, radius, angleInDegrees) =&gt; {
    const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

    return {
        x: centerX + (radius * Math.cos(angleInRadians)),
        y: centerY + (radius * Math.sin(angleInRadians))
    };
};

const describeSlice = (x, y, radius, startAngle, endAngle) =&gt; {

    const start = polarToCartesian(x, y, radius, endAngle);
    const end = polarToCartesian(x, y, radius, startAngle);

    const largeArcFlag = endAngle - startAngle &lt;= 180 ? "0" : "1";

    const d = [
        "M", 0, 0, start.x, start.y,
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;
};

const path = (degrees = 90, radius = 10) =&gt; {
    return describeSlice(0, 0, radius, 0, degrees) + 'Z';
};

export const Arc = (props) =&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"&gt;
    &lt;g transform="translate(150,150)" stroke="#000" strokeWidth="2"&gt;
        &lt;path d={path(props.degrees, props.radius)} fill="#333"/&gt;
    &lt;/g&gt;

&lt;/svg&gt;;

export default Arc;
</code></pre>


blocks|key|707519|text|你可以使用我为上面的答案编写的JSFiddle代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707520|https://jsfiddle.net/tyw6nfee/|offset|length|707521|您所需要做的就是更改最后一行console.log代码，并为其提供自己的参数：|707522|++console.log(describeArc(255,255,220,30,180));
++console.log(describeArc(CenterX,CenterY,Radius,startAngle,EndAngle))|code-block|syntax|javascript|707523|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>you can use JSFiddle code i made for answer above:</p>

<p><a href="https://jsfiddle.net/tyw6nfee/" rel="nofollow noreferrer">https://jsfiddle.net/tyw6nfee/</a></p>

<p>all you need to do is change last line console.log code and give it your own parameter:</p>

<pre><code>  console.log(describeArc(255,255,220,30,180));
  console.log(describeArc(CenterX,CenterY,Radius,startAngle,EndAngle))
</code></pre>


blocks|key|923908|text|ES6版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|923909|const+angleInRadians+=+angleInDegrees+=>+(angleInDegrees+-+90)+*+(Math.PI+/+180.0);

const+polarToCartesian+=+(centerX,+centerY,+radius,+angleInDegrees)+=>+{
++++const+a+=+angleInRadians(angleInDegrees);
++++return+{
++++++++x:+centerX+%2B+(radius+*+Math.cos(a)),
++++++++y:+centerY+%2B+(radius+*+Math.sin(a)),
++++};
};

const+arc+=+(x,+y,+radius,+startAngle,+endAngle)+=>+{
++++const+fullCircle+=+endAngle+-+startAngle+===+360;
++++const+start+=+polarToCartesian(x,+y,+radius,+endAngle+-+0.01);
++++const+end+=+polarToCartesian(x,+y,+radius,+startAngle);
++++const+arcSweep+=+endAngle+-+startAngle+<=+180+?+'0'+:+'1';

++++const+d+=+[
++++++++'M',+start.x,+start.y,
++++++++'A',+radius,+radius,+0,+arcSweep,+0,+end.x,+end.y,
++++].join('+');

++++if+(fullCircle)+d.push('z');
++++return+d;
};|code-block|syntax|javascript|923910|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>ES6 version:</p>

<pre><code>const angleInRadians = angleInDegrees =&gt; (angleInDegrees - 90) * (Math.PI / 180.0);

const polarToCartesian = (centerX, centerY, radius, angleInDegrees) =&gt; {
    const a = angleInRadians(angleInDegrees);
    return {
        x: centerX + (radius * Math.cos(a)),
        y: centerY + (radius * Math.sin(a)),
    };
};

const arc = (x, y, radius, startAngle, endAngle) =&gt; {
    const fullCircle = endAngle - startAngle === 360;
    const start = polarToCartesian(x, y, radius, endAngle - 0.01);
    const end = polarToCartesian(x, y, radius, startAngle);
    const arcSweep = endAngle - startAngle &lt;= 180 ? '0' : '1';

    const d = [
        'M', start.x, start.y,
        'A', radius, radius, 0, arcSweep, 0, end.x, end.y,
    ].join(' ');

    if (fullCircle) d.push('z');
    return d;
};
</code></pre>


blocks|key|924022|text|一个图像和一些Python|type|unstyled|depth|inlineStyleRanges|entityRanges|data|924023|只是为了更好地澄清，并提供另一种解决方案。Arc+A命令使用当前位置作为起点，因此必须先使用Moveto+M命令。|offset|length|style|CODE|924024|那么Arc的参数如下：|924025|rx,+ry,+x-axis-rotation,+large-arc-flag,+sweep-flag,+xf,+yf|code-block|syntax|javascript|924026|例如，如果我们定义以下svg文件：|924027|​|924028|<svg+viewBox="0+0+500+500">
++++<path+fill="red"+d="
++++M+250+250
++++A+100+100+0+0+0+450+250
++++Z"/>+
</svg>|924029|924030|924031|📷|atomic|924032|924033|您将使用M设置起点，使用参数xf和yf设置A的终点。|924034|我们正在寻找圆，所以我们将rx设为等于ry，这样做基本上是为了找到所有半径为rx的圆，这些圆与起点和终点相交。|924035|import+numpy+as+np

def+write_svgarc(xcenter,ycenter,r,startangle,endangle,output='arc.svg'):
++++if+startangle+>+endangle:+
++++++++raise+ValueError("startangle+must+be+smaller+than+endangle")

++++if+endangle+-+startangle+<+360:
++++++++large_arc_flag+=+0
++++++++radiansconversion+=+np.pi/180.
++++++++xstartpoint+=+xcenter+%2B+r*np.cos(startangle*radiansconversion)
++++++++ystartpoint+=+ycenter+-+r*np.sin(startangle*radiansconversion)
++++++++xendpoint+=+xcenter+%2B+r*np.cos(endangle*radiansconversion)
++++++++yendpoint+=+ycenter+-+r*np.sin(endangle*radiansconversion)
++++++++#If+we+want+to+plot+angles+larger+than+180+degrees+we+need+this
++++++++if+endangle+-+startangle+>+180:+large_arc_flag+=+1
++++++++with+open(output,'a')+as+f:
++++++++++++f.write(r"""<path+d="+""")
++++++++++++f.write("M+%25s+%25s"+%25(xstartpoint,ystartpoint))
++++++++++++f.write("A+%25s+%25s+0+%25s+0+%25s+%25s"+
++++++++++++++++++++%25(r,r,large_arc_flag,xendpoint,yendpoint))
++++++++++++f.write("L+%25s+%25s"+%25(xcenter,ycenter))
++++++++++++f.write(r"""Z"/>"""+)

++++else:
++++++++with+open(output,'a')+as+f:
++++++++++++f.write(r"""<circle+cx="%25s"+cy="%25s"+r="%25s"/>"""
++++++++++++++++++++%25(xcenter,ycenter,r))|924036|你可以在我写的this+post中获得更详细的解释。|924037|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands|1|https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/50d99ea05109104ad6ce19764ac0b22f.png|imageAlt|3|http://giacomomarchioro.blogspot.it/2018/05/svg-arc-path-explained-drawing-circular.html^0|0|L|3|P|1|1A|6|L|3|0|1A|6|1|0|2|3|0|0|0|0|0|0|0|0|1|2|0|0|4|1|E|2|H|2|L|1|0|D|2|J|2|12|2|0|0|7|9|3|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1R|8|@$D|1S|E|1T|F|G]|$D|1U|E|1V|F|G]|$D|1W|E|1X|F|G]]|9|@$D|1Y|E|1Z|1|20]|$D|21|E|22|1|23]]|A|$]]|$1|H|3|I|5|6|7|24|8|@$D|25|E|26|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|27|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|28|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|29|8|@]|9|@]|A|$]]|$1|S|3|T|5|L|7|2A|8|@]|9|@]|A|$M|N]]|$1|U|3|R|5|6|7|2B|8|@]|9|@]|A|$]]|$1|V|3|R|5|6|7|2C|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|2D|8|@]|9|@$D|2E|E|2F|1|2G]]|A|$]]|$1|Z|3|R|5|6|7|2H|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2I|8|@$D|2J|E|2K|F|G]|$D|2L|E|2M|F|G]|$D|2N|E|2O|F|G]|$D|2P|E|2Q|F|G]]|9|@]|A|$]]|$1|12|3|13|5|6|7|2R|8|@$D|2S|E|2T|F|G]|$D|2U|E|2V|F|G]|$D|2W|E|2X|F|G]]|9|@]|A|$]]|$1|14|3|15|5|L|7|2Y|8|@]|9|@]|A|$M|N]]|$1|16|3|17|5|6|7|2Z|8|@]|9|@$D|30|E|31|1|32]]|A|$]]|$1|18|3|-4|5|6|7|33|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]|1G|$5|1B|1C|1D|A|$1E|1H]]|1I|$5|1J|1C|1K|A|$1L|1M|1N|-4]]|1O|$5|1B|1C|1D|A|$1E|1P]]]]

<h1>An image and some Python</h1>

<p>Just to clarify better and offer another solution.  <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands" rel="nofollow noreferrer"><code>Arc</code></a> [<code>A</code>] command use the current position as a starting point so you have to use <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands" rel="nofollow noreferrer"><code>Moveto</code></a> [M] command first. </p>

<p>Then the parameters of <code>Arc</code> are the following:</p>

<pre><code>rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, xf, yf
</code></pre>

<p>If we define for example the following svg file:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 500 500"&gt;
    &lt;path fill="red" d="
    M 250 250
    A 100 100 0 0 0 450 250
    Z"/&gt; 
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/oqPXx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oqPXx.png" alt="enter image description here"></a></p>

<p>You will set the starting point with <code>M</code> the ending point with the parameters <code>xf</code> and <code>yf</code> of <code>A</code>.</p>

<p>We are looking for circles so we set <code>rx</code> equal to <code>ry</code> doing so basically now it will try to find all the circle of radius <code>rx</code> that intersect the starting and end point.</p>

<pre class="lang-py prettyprint-override"><code>import numpy as np

def write_svgarc(xcenter,ycenter,r,startangle,endangle,output='arc.svg'):
    if startangle &gt; endangle: 
        raise ValueError("startangle must be smaller than endangle")

    if endangle - startangle &lt; 360:
        large_arc_flag = 0
        radiansconversion = np.pi/180.
        xstartpoint = xcenter + r*np.cos(startangle*radiansconversion)
        ystartpoint = ycenter - r*np.sin(startangle*radiansconversion)
        xendpoint = xcenter + r*np.cos(endangle*radiansconversion)
        yendpoint = ycenter - r*np.sin(endangle*radiansconversion)
        #If we want to plot angles larger than 180 degrees we need this
        if endangle - startangle &gt; 180: large_arc_flag = 1
        with open(output,'a') as f:
            f.write(r"""&lt;path d=" """)
            f.write("M %s %s" %(xstartpoint,ystartpoint))
            f.write("A %s %s 0 %s 0 %s %s" 
                    %(r,r,large_arc_flag,xendpoint,yendpoint))
            f.write("L %s %s" %(xcenter,ycenter))
            f.write(r"""Z"/&gt;""" )

    else:
        with open(output,'a') as f:
            f.write(r"""&lt;circle cx="%s" cy="%s" r="%s"/&gt;"""
                    %(xcenter,ycenter,r))
</code></pre>

<p>You can have a more detailed explanation in <a href="http://giacomomarchioro.blogspot.it/2018/05/svg-arc-path-explained-drawing-circular.html" rel="nofollow noreferrer">this post</a> that I wrote.</p>


blocks|key|707737|text|我会使用其他答案中的代码，它们看起来都是相互复制的，但我会将起点设为起点角度的函数，将终点设为终点角度的函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|707738|我将通过使用绝对值使大圆弧标志独立于顺序，并通过模数360度使角度独立于数值大小。|707739|var+start+=+polarToCartesian(x,+y,+radius,+startAngle);
var+end+=+polarToCartesian(x,+y,+radius,+++endAngle);

largeArcFlag+=+Math.abs((endAngle+-+startAngle)+%25+360)+<=+180+?+"0"+:+"1";
clockwiseFlag+=+(endAngle+>+startAngle)+?+"1"+:+"0";

var+d+=+[
++++"M",+start.x,+start.y,+
++++"A",+radius,+radius,+0,+largeArcFlag,+clockwiseFlag,+end.x,+end.y|code-block|syntax|javascript|707740|向威利道歉；我没有读到最后，看到他也发现了同样的事情。如果你喜欢我的帖子，那就给他加分吧！|707741|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I'd use the code from other answers, where they all appear to be copying from each other, but I would make the start point a function of the start angle and the end point a function of the end angle.</p>
<p>I would make the large arc flag independent of the order by using absolute value, and make the angles independent of numerical magnitude by working modulo 360 degrees.</p>
<pre><code>var start = polarToCartesian(x, y, radius, startAngle);
var end = polarToCartesian(x, y, radius,   endAngle);

largeArcFlag = Math.abs((endAngle - startAngle) % 360) &lt;= 180 ? &quot;0&quot; : &quot;1&quot;;
clockwiseFlag = (endAngle &gt; startAngle) ? &quot;1&quot; : &quot;0&quot;;

var d = [
    &quot;M&quot;, start.x, start.y, 
    &quot;A&quot;, radius, radius, 0, largeArcFlag, clockwiseFlag, end.x, end.y
</code></pre>
<p>Apologies to Wiley; I hadn't read to the end and see he has spotted the same thing. If you like my post, upvote his instead!</p>


<p>Given a circle centered at (200,200), radius 25, how do I draw an arc from 270 degree to 135 degree and one that goes from 270 to 45 degree?</p>

<p>0 degree means it is right on the x-axis (the right side) (meaning it is 3 o' clock position)
270 degree means it is 12 o'clock position, and 90 means it is 6 o'clock position</p>

<p>More generally, what is a path for an arc for part of a circle with</p>

<pre><code>x, y, r, d1, d2, direction
</code></pre>

<p>meaning</p>

<pre><code>center (x,y), radius r, degree_start, degree_end, direction
</code></pre>


How to calculate the SVG Path for an arc (of a circle)

Python

给出一个以(200,200)为中心，半径为25的圆，如何绘制一条从270度到135度的圆弧和一条从270度到45度的圆弧？0度表示它就在x轴上(右侧)(表示它是3点位置) 270度表示它是12点位置，90度表示它是6点位置更一般地，圆弧的一部分的路径是什么x, y, r, d1, d2, direction含义cent...

问如何计算(圆的)圆弧的SVG路径
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何计算(圆的)圆弧的SVG路径EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何计算(圆的)圆弧的SVG路径
EN