时间戳

首页 > 解决方案 > 单击时顺时针为边框圈设置动画

javascript - 单击时顺时针为边框圈设置动画

问题描述

我使用 svg 创建了一个心形图标，点击时会填充它，我还想做的是在心脏之外显示一个圆形动画，顺时针创建。目前圆圈只是旋转，如下面的代码所示：

  Array.from(document.querySelectorAll(".heart")).forEach(button => button.addEventListener('click', function () {
    if (button.closest(".circle").style.visibility == "visible") {
      console.log("In if condition");
      button.closest(".circle").style.visibility = 'hidden';
    }
    else {
      console.log("In else condition");
      button.closest(".circle").style.visibility = 'visible';
    }
    button.classList.toggle("heart-fill-up");

  }))
  .circle {
    visibility: hidden;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
    width: 107px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px red;
  }

  .circle:hover {
    animation: border 1s forwards;
  }

  @keyframes border {
    0% {
      visibility: hidden;
      transform: rotate(0deg);
    }

    100% {
      visibility: visible;
      transform: rotate(360deg);
    }
  }

  svg {
    max-height: 120px;
  }

  .heart {
    fill: transparent;
    transition: all .5s;
  }

  .heart-fill-up {
    fill: red;
    border: 50px solid blue;
  }

  .lines {
    display: none;
  }

  .lines-show {
    fill: red;
  }
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<div class="circle">
  <svg style="visibility: visible;" 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" viewBox="0 0 298 281"
    style="enable-background:new 0 0 298 281;" xml:space="preserve">
    <style type="text/css">
      .heart {
        stroke: #FF0606;
        stroke-miterlimit: 10;
        stroke-width: 5px;
      }
    </style>
    <title>icon_wishlist</title>
    <g id="icon_wishlist">
      <path class="heart" d="M66.3,69.4c-19.1,20-19.1,51.5,0,71.5l84.6,87.9l84.7-87.8c19.1-20,19.1-51.5,0-71.5
		c-18-19.1-48.1-19.9-67.2-1.8c-0.6,0.6-1.2,1.2-1.8,1.8L151,85.7l-15.6-16.2c-18-19.1-48.1-19.9-67.2-1.8
		C67.6,68.2,67,68.8,66.3,69.4L66.3,69.4z" />
    </g>
  </svg>
</div>
<style>

</style>
<script>

</script>

</html>

我希望显示的圆圈是从右上角到左上角创建的，点击时创建一个完整的圆圈。我不想让心脏旋转。任何帮助表示赞赏！提前致谢！

标签： javascriptcss

解决方案

为什么不使用 SVGcircle并为stroke-dash-offset

circle {
  stroke: red;
  stroke-width: 1;
  fill: pink;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 2s linear infinite;
}

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

svg {
  height: 90vh;
  display: block;
  transform: rotate(-90deg);
  margin: auto;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">

    <circle cx="50" cy="50" r="40" pathLength="1"/>

</svg>

推荐阅读