Arrowheads are not displayed properly

[RFSH]

The arrowheads are not displayed correctly in all browsers.

• Safari is not showing the arrowheads.
• Firefox arrowheads are not displayed consistently depending on which zoom level the arrow was drawn.

You can see an example of it here.

Chrome:

Firefox:

Safari:

[nikhiilll]

The feature is currently not functioning due to a problem with the marker end definition in the SVG element. In Chrome, using a relative URL for the marker end works correctly. However, in other browsers, a static URL is necessary for the feature to work properly. Several Stack Overflow posts have recommended using a static URL as the solution.

1. Using base tag on a page that contains SVG marker elements fails to render markers
2. Externally defined markers don't appear in SVG

These posts offer insights into resolving the issue. To address the problem, you can choose one of two options: either include the CHAISE URL visible in the browser or utilize the mview.html URL of the OpenSeadragon viewer application. Implementing either of these URLs should help resolve the bug.

[RFSH]

I spent a lot of time looking at the issue, and the previous comment about absolute vs. relative path was irrelevant to our case. I resolved the Firefox bug by adding the vector-effect: non-scaling-stroke property to the created path in the marker definitions.

Related to Safari,

• The arrowhead is properly added to the SVG. The arrowhead is displayed using the proper scale in smaller images like this one. It's just not scaling properly, so in a huge image, you will only see the arrowhead if the image is zoomed all the way in.

• This was the closest stackOverflow link that I could find to our case. I tried the described solutions, but none of them worked.

• In this codepen, I was experimenting with different combinations of properties. Removing the vector-effect from the arrow will ensure the line and arrowhead are scaled the way way, but as a result, the line becomes very thin, so we cannot use this method in our scenario.