svg img上的时钟淡入动画[关闭]答案

【问题标题】：Clock fade-in animation on svg img [closed]svg img上的时钟淡入动画[关闭]
【发布时间】：2019-06-09 12:03:47
【问题描述】：

我在我的 HTML 中使用 svg 图片，我想让它淡入。直到这里没有什么难的。

但我需要的是图像上的淡入不相等。我想要从顶部开始渐进式淡入，然后沿着图片周围的虚拟圆圈直到圆圈完成。

恢复电源点上的时钟转换（link）。

我尝试使用像here 这样的径向渐变。但除了从中心或到中心的渐进圈外，我没有找到任何方法。另外，我使用了背景，并且 svg 图像具有一定的透明度，因此渐变不起作用。

这是我实际上拥有的代码，我知道它并不多，但我找不到任何可以查看的方向来获得我想要的结果：

var isAnimProgressing = false;
$("#button1").click(function() {
  var opa = "0";
  if(!isAnimProgressing) {
    isAnimProgressing = true;
    if($(".test").css("opacity") == "1") {
      opa = "0";
    } else {
      opa = "1";
    }
    $(".test").animate({opacity: opa}, 2000, "linear", function() {
        isAnimProgressing = false;
    });
   }
});

$("#button2").click(function() {
  if($(".test").hasClass("done")) {
    $(".test").removeClass("done");
  } else {
    $(".test").addClass("done");
  }
});

body {
  background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}

.test {
  opacity: 0;
  transition: all 2s ease;
}

.test.done {
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="styles/main.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <button id="button1">JS</button> OR
  <button id="button2">CSS</button>
	<div class="test loading">
		<img src='https://s.cdpn.io/3/kiwi.svg' alt='loading-cat'>
	</div>
</body>
</html>

【问题讨论】：

具体问题+代码示例+具体答案=重新打开

标签： javascript jquery html css svg

【解决方案1】：

您可以使用动画 SVG 蒙版做您想做的事情。

$("#button2").click(function() {
  document.getElementById("clocksweep").beginElement();
});

body {
  background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button2">SVG</button>
<div class="test loading">
<svg width="612px" height="502.174px" viewBox="0 65.326 612 502.174">
  <defs>
    <mask id="reveal" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%" fill="white"/>
      <path d="M0,0 L0,1,1,1,1,0 Z" fill="black">
        <animate id="clocksweep" attributeName="d" dur="2s" begin="indefinite" fill="freeze"
          values="M 0.5,0.5 L 0.5,0, 1,0, 1,0.5, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 1,0, 1,0, 1,0.5, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 1,0.5, 1,0.5, 1,0.5, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 1,1, 1,1, 1,1, 1,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0.5,1, 0.5,1, 0.5,1, 0.5,1, 0.5,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0,1, 0,1, 0,1, 0,1, 0,1, 0,1, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0.5, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0,0, 0.5,0 Z;
                  M 0.5,0.5 L 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0, 0.5,0 Z"
          keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1"/>
      </path>
    </mask>
  </defs>
  <g mask="url(#reveal)">
    <ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
    <path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
 	c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
	c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
	c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
	c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
	c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
	c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
	c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
	c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
	c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
	c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
	c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
	c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
	c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
	z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
	C434.693,207.929,439.613,203.01,445.731,203.01z"/>
  </g>
</svg>
</div>

【讨论】：

Oua 绝对不是我预期的答案，但正是我想要的答案。非常感谢 Paul，我以前从未使用过 .svg，也不知道可以这样做（只是认为这是一种图片格式）。现在我只需要了解你做了什么，然后在我的另一个 .svg 上做。再次感谢。
将 <defs> 部分复制到 SVG 中，并使用 <g mask="url(#reveal)">...</g> 包装现有的 SVG 内容应该是大多数 SVG 所需要做的所有事情。

【解决方案2】：

这是一个带有 CSS 动画的解决方案，它也适用于 Microsoft 浏览器：

$("#button2").click(function() {
  document.querySelector("#reveal").classList.add("animate");
});

body {
  background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}

#reveal circle {
    stroke-dasharray: 3.15px;
    stroke-dashoffset: 0px;
}
#reveal.animate circle {
    animation: clocksweep 2s linear forwards;
}

@keyframes clocksweep {
    100% { stroke-dashoffset: 3.15px; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button2">SVG</button>
<div class="test loading">
<svg width="612px" height="502.174px" viewBox="0 65.326 612 502.174">
  <defs>
    <mask id="reveal" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%" fill="white"/>
      <circle r="0.5" cx="0.5" cy="0.5" transform="matrix(0,-1,-1,0,1,1)" fill="none" stroke="black" />
    </mask>
  </defs>
  <g mask="url(#reveal)">
    <ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/>
    <path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
 	c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
	c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
	c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
	c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
	c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
	c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
	c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
	c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
	c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
	c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
	c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
	c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
	c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
	z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
	C434.693,207.929,439.613,203.01,445.731,203.01z"/>
  </g>
</svg>
</div>

【讨论】：