Question

我正在尝试将以下动画应用于svg圈元素：

https://codepen.io/FabienMotte/pen/gPKVxE

将div更改为圆圈无法正常工作。

在上面的codepen中，使用了div元素，但是我可以对svg circle元素应用相同的效果吗？

提前致谢。

Answer 1

你必须使用一堆圆圈而不是阴影。 <circle>的半径不是CSS可动画的，因此作为解决方法，您必须使用比例转换。（SMIL动画可以在半径上工作，但与Microsoft浏览器不兼容。）

rect {
  fill: #4e4e4e;
}
circle {
  fill: #65ff78;
  opacity: 0.3;
}
svg > circle:last-child {
  fill: #35ffc3;
  opacity: 1;
}
#rp1 {
  animation: ripple1 0.7s linear infinite;
}
@keyframes ripple1 {
  0% {
    transform: scale(5.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(8.5);
    opacity: 0.0;
  }
}
#rp2 {
  animation: ripple2 0.7s linear infinite;
}
@keyframes ripple2 {
  0% {
    transform: scale(3.5);
  }
  100% {
    transform: scale(5.5);
  }
}
#rp3 {
  animation: ripple3 0.7s linear infinite;
}
@keyframes ripple3 {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(3.5);
  }
}
#rp4 {
  animation: ripple4 0.7s linear infinite;
}
@keyframes ripple4 {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.5);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<defs>
  <g id="anims">
    <circle id="rp1" r="1em" />
    <circle id="rp2" r="1em" />
    <circle id="rp3" r="1em" />
    <circle id="rp4" r="1em" />
  </g>
</defs>
<rect height="100%" width="100%" />
<use xlink:href="#anims" x="50%" y="50%"/>
<circle r="0.5em" cx="50%" cy="50%" />
</svg>

Answer 2

这里是参考https://loading.io/spinner/ripple/-ripple-circle-scale-round-radar-radio

的实现

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="281px" height="281px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<defs>
        <g id="ripple-circle">
          <circle r="5" fill="none" stroke="#e92d2d" stroke-width="3">
            <animate
              attributeName="r"
              repeatCount="indefinite"
              dur="1.5873015873015872s"
              values="0;15"
              keyTimes="0;1"
              keySplines="0 0.2 0.8 1"
              calcMode="spline"
              begin="0s"
            ></animate>
            <animate
              attributeName="opacity"
              repeatCount="indefinite"
              dur="1.5873015873015872s"
              values="1;0"
              keyTimes="0;1"
              keySplines="0.2 0 0.8 1"
              calcMode="spline"
              begin="0s"
            ></animate>
          </circle>
          <circle r="5" fill="none" stroke="#e92d2d" stroke-width="3">
            <animate
              attributeName="r"
              repeatCount="indefinite"
              dur="1.5873015873015872s"
              values="0;15"
              keyTimes="0;1"
              keySplines="0 0.2 0.8 1"
              calcMode="spline"
              begin="-0.7936507936507936s"
            ></animate>
            <animate
              attributeName="opacity"
              repeatCount="indefinite"
              dur="1.5873015873015872s"
              values="1;0"
              keyTimes="0;1"
              keySplines="0.2 0 0.8 1"
              calcMode="spline"
              begin="-0.7936507936507936s"
            ></animate>
          </circle>
        </g>
      </defs>
      <use xlink:href="#ripple-circle" x="50" y="30" />

      <circle
        cx="50"
        cy="30"
        r="4"
        fill="#E92D2D"
        className="pointing-circle"
      />
</svg>

svg对圆形标记/元素的涟漪效应

2 个答案: