Code Monkey home page Code Monkey logo

Comments (4)

KuroNoDev avatar KuroNoDev commented on July 18, 2024 2

+1 Also happening in angular apps.

from enjoyhint.

Purush0th avatar 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 avatar 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>

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

from enjoyhint.

NikhilTomar15 avatar NikhilTomar15 commented on July 18, 2024

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

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

from enjoyhint.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.