본문 바로가기
svg

svg nested g : animation

by peach1227 2024. 1. 20.
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">

<style>
g {fill:red;}
g>g {fill:green;}
g>g>g {fill:blue;}
g>g>g {fill:cyan;}
g>g>g>g {fill:magenta;}
g>g>g>g>g {fill:yellow;}
g>g>g>g>g>g {fill:black;}
g>g>g>g>g>g>g {fill:cadetblue;}
g>g>g>g>g>g>g>g {fill:maroon;}
g>g>g>g>g>g>g>g>g {fill:orange;}

</style>
  <defs></defs>
  <g transform="matrix(1, 0, 0, 1, 55.878, 73.068)" stroke="#000" fill="#fff" style="transform-origin: 72.5px 0px;">
    <path d="m0,0 h-20"></path>
    <circle r="5"></circle>
    <g transform="translate(20,0)">
      <path d="m0,0 h-15"></path>
      <circle r="5"></circle>
      <g transform="translate(20,0)">
        <path d="m0,0 h-15"></path>
        <circle r="5"></circle>
        <g transform="translate(20,0)">
          <path d="m0,0 h-15"></path>
          <circle r="5"></circle>
          <g transform="translate(20,0)">
            <path d="m0,0 h-15"></path>
            <circle r="5"></circle>
            <g transform="translate(20,0)">
              <path d="m0,0 h-15"></path>
              <circle r="5"></circle>
              <g transform="translate(20,0)">
                <path d="m0,0 h-15"></path>
                <circle r="5"></circle>
                <g transform="translate(20,0)">
                  <path d="m0,0 h-15"></path>
                  <circle r="5"></circle>
                  <g transform="translate(20,0)">
                    <path d="m0,0 h-15"></path>
                    <circle r="5"></circle>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
                  </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
                </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
              </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
            </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
          </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
        </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
      </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
    </g>
    <animateTransform type="rotate" additive="sum" attributeName="transform" values="0; 360" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
  </g>
</svg>
반응형