Custom Markers on Safari

[BenjaminHofstetter]

Has anyone successfully implemented custom markers that work on Safari? I've spent hours trying to get mine to work, but with no luck. The custom markers function perfectly on Chrome and Firefox, but Safari seems to be an issue. Any help or examples would be greatly appreciated!

[BenjaminHofstetter]

I found a solution. The SVG element’s position absolute didn’t work for Safari. Now it works with width and height 0.

<template>
   <svg style="height: 0; width: 0;"> <!-- width and height 0 -->
        <defs>
          <marker id="logo" class="vue-flow__arrowhead" viewBox="-10 -10 20 20" refX="0" refY="0" markerWidth="12.5" markerHeight="12.5" markerUnits="strokeWidth" orient="auto-start-reverse">
            <polyline stroke-linecap="round" stroke-linejoin="round" fill="none" points="-5,-4 0,0 -5,4" style="stroke: rgb(177, 177, 183); stroke-width: 1;"></polyline>
          </marker>
        </defs>
    </svg>
   
    <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.05" :max-zoom="10" @node-drag="onNodeDrag" >
   ...
  </VueFlow>
</template>