Safari SVG Marker Bug

by Roman Bruckner

HTML

<svg>
  <defs>
    <marker id="my-marker" orient="auto" overflow="visible" markerUnits="userSpaceOnUse">
      <path stroke="none" fill="red" d="M 0 -5 -10 0 0 5 z"></path>
    </marker>
  </defs>
  <path id="my-path" d="M 100 100 200 100" stroke="red" stroke-width="2" />
</svg>

JavaScript

// This works everywhere
/* document.getElementById('my-path').setAttribute('marker-start', 'url(#my-marker)')
 */
// This does not work in Safari
requestAnimationFrame(() => document.getElementById('my-path').setAttribute('marker-start', 'url(#my-marker)'));