Как исправить ориентацию маркера SVG в MS Edge? - PullRequest
Новая
       6

Как исправить ориентацию маркера SVG в MS Edge?

1 голос
/ 06 марта 2020

При использовании базового c примера из Mozilla Docs и верхняя стрелка не ориентирована правильно (только в браузере Ms Edge): https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/orient

Есть ли способ исправить это для этого браузера?

Top arrow not correctly aligned

1 Ответ

2 голосов
/ 06 марта 2020

Очевидно, orient="auto-start-reverse" не работает в ребре, поэтому вам нужно будет использовать orient="auto". Для этого вместо polyline я использую 2 строки с началом координат в 10,90 

svg{width:300px}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="6" markerHeight="6"
        orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <marker id="dataArrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="6" markerHeight="6"
        orient="-65deg">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>




  <line x1="10" y1="90" x2="90" y2="90" fill="none" stroke="black"
      marker-end="url(#arrow)" marker-end="url(#arrow)" />
  <line x1="10" y1="90" x2="10" y2="10" fill="none" stroke="black"
      marker-end="url(#arrow)" marker-end="url(#arrow)" />
  
  <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
      marker-start="url(#dataArrow)" marker-mid="url(#dataArrow)"
      marker-end="url(#dataArrow)" />
</svg>

См. Эту ручку: https://codepen.io/AmeliaBR/details/qjXoQd

"Маркер SVG с автозапуском и обратным ходом .. .... Не работает в Edge / IE (и других более старых браузерах) и не дает откатов (вместо этого вы получаете невращающийся маркер). "

...