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

【问题标题】：flashing color clockwise around svg path围绕svg路径顺时针闪烁颜色
【发布时间】：2021-11-02 22:29:45
【问题描述】：

我有一个 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>

【问题讨论】：

标签： css animation svg path

【解决方案1】：

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

这个 sn-p 使用 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>

【讨论】：