<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 |
