locked
html5 start svg drawing from another eventlistener RRS feed

  • Question

  • User-418973555 posted

    trying to only start the animation of svg drawing followed by the eventlistener from previous then add class on it, but tried cannot,

     var boxThree = document.getElementsByClassName('menuslider1')[0];
    boxThree.addEventListener("transitionstart", MenuSlider1AnimationListener, false);
    ....

    function MenuSlider1AnimationListener() {
    var boxOne1 = document.getElementsByClassName('divsvgpolygon')[0]; boxOne1.classList.add('svgpolygonclass'); .. <div id="divsvgpolygon" class="divsvgpolygon"> <svg class="svgpolygonclass" x="0px" y="0px" width="150px" height="145px" viewBox="0 0 148.9 140.8"> <polygon points="65.7,0 0,64.4 34.9,69.8 30.9,140.8 67.1,138.2 67.1,96.6 87.2,95.2 91.2,140.8 127.4,132.8 120.7,75.1 148.9,69.8 116.7,40.2 122.1,4 99.3,1.3 99.3,22.8 "/> </svg> </div>

    Monday, May 27, 2019 8:33 AM

Answers

  • User-418973555 posted

    it works by putting in the described variable into it

    function startDrawingPath() {
                length = 0;
                var orig = document.querySelector('path');
                orig.style.stroke = '#ff0000';
                timer = setInterval(increaseLength, 1000 / drawFPS);
            }

    but thought of it will draw strokes by strokes, eg. draw three lines one by one then to make the drawing, but it appear to have it whole, is that a matter in the svg as i got it from illustrator?

    then tried this work nicely

     
    .svg1 {
                fill: none;
                stroke: #09d;
                stroke-width: 3;
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;
                -webkit-animation: dash 5s linear forwards;
                 animation-play-state: paused; 
              }
    
              .svg1.polygon1
              {
                animation: dash 2s linear forwards;
                animation-play-state: running;
    
              }
    
              @-webkit-keyframes dash {
                to {
                  stroke-dashoffset: 0;
                }
              }
              @keyframes dash {
                to {
                  stroke-dashoffset: 0;
                }
              }
    ..
     var boxOne1 = document.getElementsByClassName('svg1')[0];
                 boxOne1.classList.add('polygon1');
    ..
     <svg class="svg1" x="0px" y="0px" width="150px" height="145px" viewBox="0 0 148.9 140.8">
                            <polygon class="polygon1" points="65.7,0 0,64.4 34.9,69.8 30.9,140.8 67.1,138.2 67.1,96.6 87.2,95.2 91.2,140.8 127.4,132.8 
    	                      120.7,75.1 148.9,69.8 116.7,40.2 122.1,4 99.3,1.3 99.3,22.8 " />
                          </svg>

    it should work this by removing the id="path1" from path tag, by only putting a class 'polygon1

      <svg class="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	                         width="100px" height="50px" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
                            <path class="polygon1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M15,17c0,10.5,0-10.5,0-10.5h68v13.44"/>
                            </svg>
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2019 9:39 PM

All replies

  • User839733648 posted

    Hi larnvok09,

    According to your description, I'm sorry that I could not reproduce your issue because of incomplete information.

    What is the style of divsvgpolygon? This class is important according to your code.

    If possible, please provide more details like related code so that it will be easier to help with you.

    Best Regards,

    Jenifer

    Tuesday, May 28, 2019 3:23 AM
  • User-418973555 posted

    have modified the source as it is below :

    #path1 {
    fill: none;
    stroke: none
    }

    function AnimationListener() { .. startDrawingPath(); var distancePerPoint = 1; var drawFPS = 60; var orig = document.querySelector('path'); //var orig = document.getElementsByClassName('cpolygon'); var length; var timer; function startDrawingPath() { length = 0; orig.style.stroke = '#000000'; timer = setInterval(increaseLength, 1000 / drawFPS); } function increaseLength() { var pathLength = orig.getTotalLength(); length += distancePerPoint; orig.style.strokeDasharray = [length, pathLength].join(' '); if (length >= pathLength) { clearInterval(timer); } } <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve"> <path id="path1" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M48,74c0-48,0-48,0-48h214v48"/> <g id="duplicate"></g> </svg>

    it gives an error on  orig.style.stroke = '#000000'; , style of an null, 

    dun think it is a good idea to use document.querySelector('path'), to find path tag, 

    Tuesday, May 28, 2019 4:23 AM
  • User839733648 posted

    Hi larnvok09,

    I've tried your code and found that orig.style.stroke works well on my side.

    I've made a test and you could see that the orig.style.stroke works when I set it as red.

        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="300px" height="100px" viewBox="0 0 300 100" enable-background="new 0 0 300 100" xml:space="preserve">
        <path id="path1" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M48,74c0-48,0-48,0-48h214v48" />
        <g id="duplicate"></g></svg>
        <script>
            var orig = document.querySelector('path');
            orig.style.stroke = '#ff0000';
        </script

    Result:

    If you still have issue, please describe your issue in details with complete code which could reprodcue your issue.

    Best Regards,

    Jenifer

    Tuesday, May 28, 2019 8:03 AM
  • User-418973555 posted

    it works by putting in the described variable into it

    function startDrawingPath() {
                length = 0;
                var orig = document.querySelector('path');
                orig.style.stroke = '#ff0000';
                timer = setInterval(increaseLength, 1000 / drawFPS);
            }

    but thought of it will draw strokes by strokes, eg. draw three lines one by one then to make the drawing, but it appear to have it whole, is that a matter in the svg as i got it from illustrator?

    then tried this work nicely

     
    .svg1 {
                fill: none;
                stroke: #09d;
                stroke-width: 3;
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;
                -webkit-animation: dash 5s linear forwards;
                 animation-play-state: paused; 
              }
    
              .svg1.polygon1
              {
                animation: dash 2s linear forwards;
                animation-play-state: running;
    
              }
    
              @-webkit-keyframes dash {
                to {
                  stroke-dashoffset: 0;
                }
              }
              @keyframes dash {
                to {
                  stroke-dashoffset: 0;
                }
              }
    ..
     var boxOne1 = document.getElementsByClassName('svg1')[0];
                 boxOne1.classList.add('polygon1');
    ..
     <svg class="svg1" x="0px" y="0px" width="150px" height="145px" viewBox="0 0 148.9 140.8">
                            <polygon class="polygon1" points="65.7,0 0,64.4 34.9,69.8 30.9,140.8 67.1,138.2 67.1,96.6 87.2,95.2 91.2,140.8 127.4,132.8 
    	                      120.7,75.1 148.9,69.8 116.7,40.2 122.1,4 99.3,1.3 99.3,22.8 " />
                          </svg>

    it should work this by removing the id="path1" from path tag, by only putting a class 'polygon1

      <svg class="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	                         width="100px" height="50px" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
                            <path class="polygon1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M15,17c0,10.5,0-10.5,0-10.5h68v13.44"/>
                            </svg>
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2019 9:39 PM
  • User839733648 posted

    Hi larnvok09,

    According to your description, it seems that you have solved your issue by yourself.

    I suggest that you could mark it as answer so that it will be helpful to those meet with the same issue.

    Best Regards,

    Jenifer

    Wednesday, May 29, 2019 7:44 AM