<svg viewBox="0 0 400 400"> <style> </style> <defs> <mask id="mask-1"> <g transform="translate(0,398) scale(1,-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) " /> </g> </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>
반응형
'svg' 카테고리의 다른 글
svg viewBox ;understanding relative, abolute units (0) | 2023.10.12 |
---|---|
svg viewBox ; a coordinate system (0) | 2023.10.11 |
svg mask : using transform attribute (0) | 2023.10.10 |
svg mask with linearGradient and radialGradient (0) | 2023.10.08 |
circulatory system svg in korean (2) | 2023.10.07 |