SVG 2つのパスアークが

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>test</title> 
 
    </head> 
 
    <body> 
 

 
    <svg width="100%" height="177" viewBox="0 0 218 157" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
     <g transform="translate(2,5)"> 
 
      <path d="M10 157 A 109 109,0,1,1,208 157" stroke-width="1" fill="none" stroke="#FFECED"/> 
 
      <path id="circle-line" stroke-width="1" fill="none" d="M10 157 A109,109 0,0,1 190.76210658972008 36.91700667972192" stroke="#FF979C"/> 
 
     </g> 
 
    </svg> 
 
    </body> 
 
</html>

を一致していない私は2つの円のパスが一致しないことが判明したが、開始点10 157と半径109 109が同じで、私に答えを与える誰もが非常にappricateます。

出典

2017-06-23 midnight coder

ちょうど2つの弧が同じ半径と同じ開始点を持つからといって、それらが揃うとは限りません。同じ半径と始点を持つ弧の数は無限です。

明らかに、ポイント（190.76210658972008,36.91700667972192）は最初の弧にはありません。計算してみましょう。

円弧の中心は、開始点と終了点から109点になります。そのX座標は(208+10)/2 == 109になります。そしてY座標は（ピタゴラスの定理を使って）157 - sqrt(109^2 - 99^2) == 157 - 45.60702 == 111.39298になります。

（190.76210658972008,36.91700667972192）が曲線上にある場合は、（109,111.39298）から正確に109になります。どれどれ。

sqrt((190.76211-109)^2 + (111.39298-36.91701)^2) == sqrt(12231.71274) == 110.59707.

これは曲線上にないので、その終点に描かれた円弧がわずかに異なるパスをたどることを意味します。

このように正確に一致するアークを描こうとするのは難しいです。座標のわずかな違いでも、アークが予想どおりに大きく変化する可能性があります。

正確に達成しようとしているのは何ですか？ 2番目の線を同じ円弧に従おうとしているだけの場合は、より簡単な解決法は、同じ円弧の短いセグメントを描画するためにstroke-dasharrayを使用することです。以下の例を参照してください。

<svg width="100%" height="177" viewBox="0 0 218 157" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <g transform="translate(2,5)"> 
 
    <path d="M10 157 A 109 109,0,1,1,208 157" stroke-width="1" fill="none" stroke="#FFECED"/> 
 
    <path d="M10 157 A 109 109,0,1,1,208 157" stroke-width="1" fill="none" stroke="#FF979C" stroke-dasharray="310 700"/> 
 
    </g> 
 
</svg>

出典

2017-06-23 12:01:22

おかげで、あなたは正しく私の問題を解決し、あなたはとても親切です –

SVG 2つのパスアークが

答えて

関連する問題