본문 바로가기
svg

svg mask : using transform attribute

by peach1227 2023. 10. 10.
<svg viewBox="0 0 400 400">

<style>
</style>

<defs>



<mask id="mask-1">
<path d="M 0 200 A 50 50 0 0 1 100 200 A 50 50 0 0 1 200 200 Q 200 300 102 346 Q 0 300 0 200" fill="#ffffff"  transform="translate(100,-50)" />
</mask>


</defs>
<image href="https://tistory4.daumcdn.net/tistory/6522157/skin/images/Hydrangeas.jpg" x="0" y="0" width="400" height="400" mask="url(#mask-1)"/>

</svg>
반응형