Re: [svgwg] SVG marker orientation at a 180° U-turn not well defined

> the midpoint of the triangles differs in both testcases. it might be related to a rotation around the endpoint of the path and so reasonable related to the rotation but had to be verified and stated like that then.

I don't see this. The (0,0) reference point of the marker is the middle of the base of the triangle, and this is correctly aligned with the marked point in both cases.

> Another question is, what is the code exactly "ordering"?

When a marker is orient="auto" the positive _x_-axis of the marker is re-oriented to match the direction of the path.  For this marker, that means that the triangle will point up if the path is going left to right, and will point down if the path is going right to left.  I have modified the path [in the CodePen](https://codepen.io/AmeliaBR/pen/8af9bb5a11b8da414499cb8f51c5191c/) to include some smooth mid-points so this is more clear (on the left), and also some more typical corners (on the right).

But of course, in the center point, the path is going neither left-to-right nor right-to-left. It is going straight down and then straight back up again.  The spec says to take an angle halfway between those two, but it doesn't say whether "halfway" should be measured clockwise or counterclockwise.

I _also_ modified the CodePen to create a mirror-image path, one where the mid-point has an incoming segment going straight up and an outgoing segment straight down. I'm glad I did. It turns out that the non-MS browsers aren't as consistent as I first thought. Firefox flips the direction of the mid-point marker, but Chrome, Safari, and Inkscape do not.

So here's my revised test-case code

```xml
<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 20 20"
     width="400" height="400">
  <marker id="m"
          overflow="visible" 
          orient="auto">
    <polygon fill="red" fill-opacity="0.8"
             points="-2,0 0,-4 2,0"/>
  </marker>
  <path fill="none" stroke="navy"
        d="M0,5 L2,4 
           Q10,0 10,6
           Q10,0 18,4
           L19,8"
        marker-mid="url(#m)" />
  <path fill="none" stroke="seaGreen"
        d="M0,15 L2,16 
           Q10,20 10,14
           Q10,20 18,16
           L19,12"
        marker-mid="url(#m)" />
</svg>
```

And here are the three different renderings:

MS Edge (also IE, except that IE also draws strokes on the markers because of completely unrelated bug):

![Two mostly-horizontal curved paths, with the path shapes mirror images of each other, reflected top-to-bottom. Both pinch together into a vertical point in the middle and also have a sharp bend on the right.  There are red triangle markers on the left smooth curve, at the pinch point, and at the sharp bend.  Both center markers point down; other markers all point mostly up, though slightly angled. ](https://user-images.githubusercontent.com/9876129/28239562-440d7876-692c-11e7-9010-7bc541e9a85f.png)

Firefox:

![The same shapes, except that one marker points up and the other points down.](https://user-images.githubusercontent.com/9876129/28239568-593066d2-692c-11e7-8c71-0e138d20d627.png)

Inkscape (also Chrome and Safari):

![The same shapes, except that both markers point up.](https://user-images.githubusercontent.com/9876129/28239597-f6ecba56-692c-11e7-8da6-40c4caba9ee1.png)




-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/svgwg/issues/333#issuecomment-315533276 using your GitHub account

Received on Saturday, 15 July 2017 13:13:57 UTC