<style>
svg {/*border:1px solid red;*/}
</style>
<svg width="500" height="250" viewBox="0 0 100 50">
<defs>
<clipPath id="clip1"><circle cx="50" cy="25" r="25"/></clipPath>
</defs>
<image id="image1" class="image1" clip-path="url(#clip1)" href="https://tistory3.daumcdn.net/tistory/6522157/skin/images/Koala.jpg" width="100" height="50" alt="image1"/>
</svg>
<svg width="500" height="250" viewBox="0 0 100 50">
<defs>
<clipPath id="clip2"><ellipse cx="50" cy="25" rx="32" ry="25"/></clipPath>
</defs>
<image id="image1" class="image1" clip-path="url(#clip2)" href="https://tistory3.daumcdn.net/tistory/6522157/skin/images/Koala.jpg" width="100" height="50" alt="image2"/>
</svg>
반응형
'svg' 카테고리의 다른 글
| svg path d attribute command example (0) | 2023.09.09 |
|---|---|
| svg clipPath snu logo example (0) | 2023.09.03 |
| svg simple logo (0) | 2023.09.02 |
| svg animation using inkscape (0) | 2023.09.02 |
| svg clipPath animation (0) | 2023.09.02 |