본문 바로가기
svg

svg patternTransform attribute : translate(tx,xy)

by peach1227 2023. 12. 30.
<svg width="500" height="500" viewBox="0 0 500 500">
    <style>
        #rect1 {
            transform-box: fill-box;
            transform-origin: 50% 50%;
        }
    </style>
    <defs>
        <pattern id="pattern1" width="100" height="100" viewBox="0 0 100 100" patternUnits="userSpaceOnUse" x="0" y="0" patternTransform="translate(150)">
            <circle cx="50" cy="50" r="50" fill="#ff0000"></circle>
            <ellipse cx="50" cy="50" rx="30" ry="15" fill="#0000ff" style="opacity:.5"></ellipse>
            <circle cx="50" cy="50" r="10" fill="#ffff00"></circle>
        </pattern>
    </defs>
    <g id="g1">
        <rect id="rect1" x="150" y="200" width="200" height="100" fill="url(#pattern1)" stroke="black">
            <animateTransform attributeName="transform" type="rotate" values="0;360;0" additive="sum" fill="freeze" repeatCount="indefinite" begin="0" dur="3s"/>
        </rect>
    </g>
</svg>



반응형