CODEWITHSUNDEEP
svg
midnight coder
midnight coder

Reputation: 13

svg two path arc do not coincide

<!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>

i found the two circle path not coincide, but the start point 10 157 and the radius109 109 is the same，anyone who give me the answer will very appricate.

Upvotes: 1

Views: 56

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Just because two arcs have the same radius, and the same start point, doesn't mean they will align. There are an infinite number of arcs that have the same radius and start point.

Clearly, the point (190.76210658972008, 36.91700667972192) is not on the first arc. Let's calculate and see.

The centre of the arc will be at a point that is 109 from the start and end points. Its X coord will be (208+10)/2 == 109. And the Y coord will be (using Pythagoras' theorem) 157 - sqrt(109^2 - 99^2) == 157 - 45.60702 == 111.39298.

If (190.76210658972008, 36.91700667972192) is on the curve, it will be exactly 109 from (109, 111.39298). Let's see.

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

So it isn't on the curve, and that will mean that the arc drawn to that end point will follow a slightly different path.

Trying to draw arcs that coincide exactly like this is difficult. Even slight variances in the coordinates can cause the arcs to vary significantly from what you expect.

What exactly are you trying to achieve? If you are just trying to have a second line follow the same arc, then a much simpler solution is to use a stroke-dasharray to draw a shorter segment of the exact same arc. See example below.

<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>

Upvotes: 1

Related Questions