SVG arcが楕円の後にない

Question

楕円の一部を弧の軌跡で描きたいと思います。しかし、私はそれがすべきだと思ったように、うまくいきません。これは、コードである：

<svg fill="none" stroke="#f00" height="24" viewBox="0 0 24 24" 
    width="24" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M16 3.4a9.7 8.3 0 1 0-9.3 14.4"/> 
    <ellipse cx="12.2" cy="11" rx="9.7" ry="8.3" stroke="green" opacity=".5"/> 
</svg> 

画像：

赤パスは緑の経路に従うべきです。

アークコードa rx ry x-axis-rotation large-arc-flag sweep-flag dx dyによれば、制約を満たすために描くことができる楕円の部分、開始点と終了点、2つの半径に対応する必要があります。ご覧のように、点Aと点Bを通り、半径が9.7と8.3の緑色の楕円を通過します。同じ半径と同じ点を持つ弧がそれに対応しないのはなぜですか？

acrが緑の楕円の部分とまったく同じになるように、点AとBと半径を求めることができますか？ https://codepen.io/anon/pen/eRXWLqが

これは私が完全に異なる半径を得ることができる最も近い：ここ

はcodepenある https://codepen.io/anon/pen/EXMXNNあなたは0（反時計回り）に設定し、「フラグを掃引」を使用しているためです

Answer 1

、および"large arc"フラグが1に設定されている（楕円の周りに2つの方法のうち長い方を描画する）。しかし、楕円上の2つの点の間の反時計回りの距離は、実際には、楕円の周りの2つの方法のうちの短い方です。

溶液を0まで「大アーク」フラグを変更することです：

<svg fill="none" stroke="#f00" width="400px" viewBox="0 0 24 24" 
 
    width="24" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M16 3.4a9.7 8.3 0 0 0 -9.3 14.4"/> 
 
    <ellipse cx="12.2" cy="11" rx="9.7" ry="8.3" stroke="green" opacity=".5"/> 
 
</svg>

アークは、まだ完全に正確ではありませんなぜあなたは不思議に思っているならば、それはどちらかだろう。

1. 開始点と終了点は正確ではありません。私。完全に楕円ではない、または
2. 数値不正確です。詳細については、この回答をご覧ください：How to render a svg circle using start and endAngle