<head>
<style>
body {width:100%;height:100%;display:float;}
svg {border:1px solid red;margin:10px;width:200px;height:200px;}
</style>
</head>
<h2>viewport with width:200px and height:200px</h2>
<body>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"></rect>
<circle cx="50%" cy="50%" r="4" fill="white"></circle>
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"></rect>
<circle cx="50%" cy="50%" r="4" fill="white"></circle>
</svg>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%"></rect>
<circle cx="50%" cy="50%" r="4" fill="white"></circle>
</svg>
</body>
viewport with width:200px and height:200px
반응형
'svg' 카테고리의 다른 글
| svg viewBox ;understanding relative, abolute units and using group tag <g> (0) | 2023.10.12 |
|---|---|
| svg viewBox ;understanding relative, abolute units (0) | 2023.10.12 |
| svg mask :using transform attribute 2 (1) | 2023.10.10 |
| svg mask : using transform attribute (0) | 2023.10.10 |
| svg mask with linearGradient and radialGradient (0) | 2023.10.08 |
