<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <defs></defs> <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" d="M 132.319 282.787 L 387.002 282.787"></path> <g> <path d="M 253.513 228.044 C 253.513 258.601 228.48 283.372 197.6 283.372 C 166.72 283.372 141.687 258.601 141.687 228.044 C 141.687 197.487 166.72 172.716 197.6 172.716 C 228.48 172.716 253.513 197.487 253.513 228.044 Z M 243.086 229.508 C 243.086 254.17 222.746 274.163 197.655 274.163 C 172.565 274.163 152.225 254.17 152.225 229.508 C 152.225 204.847 172.565 184.854 197.655 184.854 C 222.746 184.854 243.086 204.847 243.086 229.508 Z M 207.845 227.752 C 207.845 232.602 203.782 236.534 198.77 236.534 C 193.758 236.534 189.695 232.602 189.695 227.752 C 189.695 222.902 193.758 218.97 198.77 218.97 C 203.782 218.97 207.845 222.902 207.845 227.752 Z M 196.136 225.995 L 203.764 225.995 L 203.764 237.645 L 225.996 237.645 L 225.996 243.872 L 196.136 243.872 L 196.136 225.995 Z M 198.478 224.824 L 201.405 93.091" style="transform-origin: 50% 0%; fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box;"> <animateTransform type="skewX" additive="sum" attributeName="transform" values="-20; 20" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </path> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg animation : href attribute vs parentElement (1) | 2023.10.22 |
---|---|
svg animations; <g> tag <use> tag (1) | 2023.10.21 |
svg radialGradient and transform (0) | 2023.10.18 |
svg radialGradient gradientTransform : skewX (0) | 2023.10.17 |
svg rect linearGradient spreadMethod (0) | 2023.10.17 |