본문 바로가기
svg

svg animateTransform example

by peach1227 2023. 9. 1.
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">
  <style>
        polygon:nth-of-type(2) {opacity:.7;}
  </style>
  <polygon points="60,30 90,90 30,90" fill="maroon">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="5s"
      repeatCount="indefinite" />
  </polygon>
  <polygon points="30,30 60,90 90,30" fill="skyblue">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="5s"
      repeatCount="indefinite" />
  </polygon>
</svg>

반응형

'svg' 카테고리의 다른 글

svg clipPath animation  (0) 2023.09.02
svg textPath animation  (0) 2023.09.01
svg animationMotion  (0) 2023.09.01
svg textPath example 1  (0) 2023.08.31
how to use svg pattern  (0) 2023.08.29