0

The below coding working fine in IE. but the arrow mark is going left orient in chrome.

What is the exact problem. pls, Can anyone tell me. ?

 <html>
 <body>
 <svg viewBox="0 0 1000 1000">
 <defs>
   <marker id = "EndMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" 
 markerWidth ="3" markerHeight = "3" stroke = "green" stroke-width = "1" fill = "none" 
 orient = "auto">
        <polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>          
</marker>
<marker id="line10_Tail" viewBox="0 0 10 10" refX="5" refY="5" `markerWidth="3"
markerHeight="3" stroke-width = "1" orient="auto">
<polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>
</marker>
</defs>
<polyline points="300,100 300,200 200,200 100,200 100,100 150,100" fill = "none" 
stroke= "black" stroke-width = "5"  marker-end = "url(#EndMarker)"/>
<path fill="none" marker-end="url(#line10_Tail)" stroke="black" stroke-width="5"  
d="M500,445 S450,445,250,444 S1,443 1,443"/>
<polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>
 </svg>
</body>
</html

Here's the corresponding jsfiddle.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
LivinKalai
  • 311
  • 2
  • 4

1 Answers1

0

Your second line is using a "Shorthand Smooth Cubic Bezier CurveTo" which is shown as the capital S followed by two X,Y coordinates.

d="M 500,445  S 450,445,250,444  S 10,443 10,443"

What you are experiencing is a math problem. You've built a line that starts at a point in space A, curves out to a point B, and ends at a final point in space C, right? The coordinates that you're giving to B and C are the same. When the line curves out to B and then is expected to wraps around to end at point B one browser (IE) might take a wild guess to point the arrow left while another browser (Chrome) took a wild guess to point the arrow right.

There are two solutions. One is you could simply move the curveTo point away from the tip so there's a little space between the curve and the tip so there's no ambiguity about which direction it's going.

d="M 500,445  S 450,445,250,444  S 11,443 10,443"

Even better, since these lines are straight, you could use straight line handles.

d="M 500,445  L 250,444  L 10,443"

Read more information on the W3C's spec on Path Data: http://www.w3.org/TR/SVG11/paths.html#PathData

Wray Bowling
  • 2,346
  • 2
  • 16
  • 19