围绕 svg 路径顺时针闪烁颜色

Question

我有一个 svg 四分之一圆，我需要制作动画，以便它的边框会随着时间顺时针变为#FF00AF 并且运行所有边框无限次有什么优雅的方法可以做到这一点吗？

<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d)">
    <path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
    <path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
  </g>
  <defs>
    <filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="8"/>
      <feGaussianBlur stdDeviation="7"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
      <stop offset="0.727873" stop-color="#8C1F6F"/>
      <stop offset="1" stop-color="#93006C"/>
    </radialGradient>
  </defs>
</svg>

Answer 1

实现旋转的一种方法是旋转整个 SVG - 围绕其左上角。

此代码段使用 CSS 动画将其从 -90 度连续旋转到 90 度。显然改变它来产生你想要的任何效果。

body {
  overflow: hidden;
}

svg {
  animation-name: rotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: top left;
}

@keyframes rotate {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d)">
    <path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
    <path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
  </g>
  <defs>
    <filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="8"/>
      <feGaussianBlur stdDeviation="7"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
      <stop offset="0.727873" stop-color="#8C1F6F"/>
      <stop offset="1" stop-color="#93006C"/>
    </radialGradient>
  </defs>
</svg>

围绕 svg 路径顺时针闪烁颜色

flashing color clockwise around svg path

css

animation

svg

path