<svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>nested svg</title> <desc>we love nested svgs! this is fun. preserve Aspect Ratio</desc> <defs> <symbol id="symbol1"> <circle cx="25" cy="25" r="25" style="stroke: inherit; fill: inherit;fill-opacity:.3"></circle> </symbol> </defs> <rect x="0" y="0" width="25vw" height="25vh" style="stroke: blue;fill: none;"></rect> <svg x="0" y="0" width="25vw" height="25vh" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin meet"> <use fill="green" xlink:href="#symbol1"></use> </svg> <svg x="0" y="0" width="25vw" height="25vh" viewBox="0 0 50 50" preserveAspectRatio="xMidYMid meet" > <use fill="red" xlink:href="#symbol1"></use> <animate attributeName="viewBox" values="0 0 0 0;-250 -250 500 500" begin="0" dur="3s" additive="sum" fill="freeze" repeatCount="indefinite"></animate> </svg> <svg x="0" y="0" width="25vw" height="25vh" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax meet"> <use fill="blue" xlink:href="#symbol1"></use> </svg> </svg>
반응형
'svg' 카테고리의 다른 글
svg nested g : animation (0) | 2024.01.20 |
---|---|
svg: outermost svg tag and other container elements (0) | 2024.01.19 |
svg preserveAspectRatio : using viewport width,viewport height and nested svgs (0) | 2024.01.18 |
svg animation : face (0) | 2024.01.17 |
svg animation : <animate> preserveAspectRatio calcMode="discrete" ; <animateTransform> (0) | 2024.01.17 |