圍繞Svg路徑順時針閃爍顏色

我有一個svg的四分之一圓，我需要制作影片，使它的邊框隨著時間的推移順時針變化為#FF00AF，并無限次地運行所有的邊框。 有什么優雅的方法可以做到這一點嗎？

< svg width="339" height="313" viewBox="0 0 339 313"/span> fill="none"/span> xmlns="http: //www. w3.org/2000/svg">。
  <g filter="url(#filter0_d)"/span>>
    <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)"/span>/>
    <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>/span>
  <defs>/span>
    < 過濾器 id="filter0_d"/span> 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 127 0" result="hardAlpha"/> 
      <feOffset dy="8"/span>/>
      <feGaussianBlur stdDeviation="7"/span>/>
      < feComposite in2="hardAlpha" operator="out"/>
      < feColorMatrix type="matrix" values="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)"/span>>
      <stop offset="0。 727873" stop-color="#8C1F6F"/>
      < stop offset="1" stop-color="#93006C"/>
    </radialGradient>/span>
  </defs>/span>
</svg>/span>

uj5u.com熱心網友回復：

一種方法是旋轉整個SVG--關于它的左上角。

這個片段使用CSS影片將其從-90度連續旋轉到90度。很明顯，你可以改變它以獲得你想要的任何效果。

span class="hljs-selector-tag">body {
  overflow: hidden;
}

svg {
  animation-name: rotate;
  animation-duration: 5s;
  animation-iteration-count: 無限。
  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"/span> fill="none"/span> xmlns="http: //www. w3.org/2000/svg">。
  <g filter="url(#filter0_d)"/span>>
    <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)"/span>/>
    <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>/span>
  <defs>/span>
    < 過濾器 id="filter0_d"/span> 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 127 0" result="hardAlpha"/> 
      <feOffset dy="8"/span>/>
      <feGaussianBlur stdDeviation="7"/span>/>
      < feComposite in2="hardAlpha" operator="out"/>
      < feColorMatrix type="matrix" values="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)"/span>>
      <stop offset="0。 727873" stop-color="#8C1F6F"/>
      < stop offset="1" stop-color="#93006C"/>
    </radialGradient>/span>
  </defs>/span>
</svg>/span>

標籤：

上一篇：為什么隨著我更新烏龜螢屏的次數增多，烏龜螢屏的更新速度會變慢？

下一篇：如何在影片中改變Y的位置