No Arrow Heads in Ember Apps

MorganIsBatman commented 9 years ago

Due to 'marker-end' using a url reference to put the arrow head on the pointers, I was only seeing the arc, but not the end of the arrow in my Ember App. I soon discovered it was because of the way Ember manages its routing.

Managed to fix it by getting the URL when making the SVG, then adding it to the properties in the renderArrow function:

var currentURL = window.location.href ... 'marker-end': "url(" + currentURL + "#arrowMarker)" ...

Not sure if its worth fixing for the limited cases, but thought I'd leave this here in case any one had a similar issue

KuroNoDev commented 8 years ago

+1 Also happening in angular apps.

Purush0th commented 8 years ago

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);

            }

andrewspy commented 6 years ago

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>

Being said that, does anybody know the root cause to the non-rendered #arrowMarker?

NikhilTomar15 commented 5 years ago

var currentURL = window.location.href 'marker-end': "url(" + currentURL + "#arrowMarker)"

It works perfectly in safari using Ionic 4 Angular 6. Thanks

xbsoftware / enjoyhint

No Arrow Heads in Ember Apps #28