Question

我想在动画结束时填写徽标，然后点击徽标并更改其颜色。目前，当动画结束时，徽标会填充，但之后当我点击它时颜色不会改变。在绘制笔划的同时，我可以在徽标内部点击它，它会改变颜色，但是一旦动画结束，它就不再在点击时改变颜色。

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<defs>

    <style type="text/css">
     .st0{fill:#fff;stroke:#F15A43;stroke-width:10;stroke-miterlimit:10;}

.st0 {
stroke-dasharray: 2100;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
-o-animation: dash 2s linear forwards;
-moz-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}

#logo.clickit .st0 {
fill: #000;
transistion: .8s;
}

#logo.load .st0 {
fill: #434343;
transition: .5s;
}

@-webkit-keyframes dash {
from {
        stroke-dashoffset: 2100;
}
to {
        stroke-dashoffset: 0;
}
}

<script type="text/javascript">

var loader = document.getElementById('logo');
loader.addEventListener("animationend", function() {
this.classList.toggle('load');
}, false);

var clicker = document.querySelector('#logo');
clicker.addEventListener('click', function() {
this.classList.toggle('clickit');
});

</script>
</defs>
<path class="st0" d="M427.4,252.3c0,0,0,77.5-12.3,107.5c-12.9,31.6-51.1,39.6-51.1,39.6s-12.9,3.6-25.3,3.6
c-12.7,0-12.6-7.8-12.7-15.7c0-17.1,0-120.8,0-120.8l-0.1-46.2c0-33-11.4-33.6-12.6-33.7c-1.3,0-12.3,0.6-12.3,33.6v163.2
c0,0,0.6,29.2-25.7,29.9c-7.9,0-15.8,0-23.8,0c-9,0-18,0-26.9,0c-26.3-0.7-25.7-29.9-25.7-29.9V220.2c0-33-11-33.5-12.3-33.6
c-1.3,0-12.6,0.6-12.6,33.7l-0.1,46.2c0,0,0,103.7,0,120.8c0,7.9,0,15.7-12.7,15.7c-12.4,0-25.3-3.6-25.3-3.6s-38.2-8.1-51.1-39.6
c-12.3-30-12.3-107.5-12.3-107.5c0-160.7,38-160.7,63.4-160.7s50.7,26.7,50.7,26.7c11.1-17.9,38.3-31.5,63.4-31.7
c25.1,0.2,52.3,13.8,63.4,31.7c0,0,25.3-26.7,50.7-26.7S427.4,91.6,427.4,252.3z"/>
</svg>

完整的HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
      <div style="text-align: center; padding: 150px 0;">
          <object>
              <embed src="merchery icon.svg" width="40%" height="40%">
          </object>
      </div>
  </body>
</html>

2个javascript函数冲突

0 个答案: