Due to 'marker-end' using a url reference to put the arrow head on the pointers, I was

No Arrow Heads in Ember Apps about enjoyhint HOT 4 OPEN

xbsoftware commented on July 18, 2024 1

No Arrow Heads in Ember Apps

from enjoyhint.

Comments (4)

KuroNoDev commented on July 18, 2024 2

+1 Also happening in angular apps.

from enjoyhint.

Purush0th commented on July 18, 2024 1

Here is the fix for the angular app. This fix don't need source level changes,

        var steps = [
                {
                    selector: '#selector',
                    event: 'next',
                    description: 'anything',
                    onBeforeStart: addMarkerEnd,
                    showNext: true
                }
                    ];

      // call back function to execute before the enjoy hint steps
            function addMarkerEnd() {
                var marker = '#enjoyhint_arrpw_line';
                // remove previous element
                angular.element(marker).remove();

                var path = $location.path();
                var url = 'url(' + path + '#arrowMarker)';

                var interval = $interval(function () {

                    if (angular.element(marker).length > 0) {

                        angular.element(marker).attr('marker-end', url);

                        // cancel the interval
                        $interval.cancel(interval);

                    }

                }, 200);

            }

from enjoyhint.

andrewspy commented on July 18, 2024

I have similar problem rendering the marker-end on iOS (Chrome is working fine), setting the path in url(path + '#arrowMarker') does solve the problem, but I don't think it is the root cause as I can perfectly render the #arrowMarker in a static html file without using path as follow (for both Chrome/iOS):-

<html>

<body>
  <div>
    <svg width="450" height="800">
      <defs>
        <marker id="arrowMarker" viewBox="0 0 36 21" refX="21" refY="10" markerUnits="strokeWidth" orient="auto" markerWidth="16"
          markerHeight="12">
          <path style="fill:none; stroke:rgb(0,0,255); stroke-width:2" d="M0,0 c30,11 30,9 0,20"></path>
        </marker>
      </defs>
      <path style="fill:none; stroke:rgb(0,0,255); stroke-width:3" marker-end="url(#arrowMarker)" d="M48.53750228881836,370 Q58.53750038146973,370 58.53750038146973,207"
        id="enjoyhint_arrpw_line"></path>
    </svg>
  </div>
</body>

</html>