<svg viewBox="-135 -45 270 90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="grad_mask" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0.4" stop-color="#000000"></stop>
<stop offset="0.5" stop-color="#ffffff"></stop>
</linearGradient>
<radialGradient id="myGradient">
<stop offset="50%" stop-color="white" />
<stop offset="60%" stop-color="black" />
</radialGradient>
<mask id="mask">
<rect x="-135" y="-45" width="270" height="90" fill="url(#grad_mask)"></rect>
</mask>
<mask id="mask2">
<circle cx="0" cy="0" r="90" fill="url('#myGradient')" />
</mask>
</defs>
<g transform="translate(0,0)">
<image x="-135" y="-45" width="270" height="90" mask="url(#mask)" xlink:href="https://tistory4.daumcdn.net/tistory/6522157/skin/images/Hydrangeas.jpg"></image>
</g>
<g transform="translate(0,0)">
<image x="-135" y="-45" width="270" height="90" mask="url(#mask2)" xlink:href="https://tistory4.daumcdn.net/tistory/6522157/skin/images/Hydrangeas.jpg"></image>
</g>
</svg>
반응형
'svg' 카테고리의 다른 글
| svg mask :using transform attribute 2 (1) | 2023.10.10 |
|---|---|
| svg mask : using transform attribute (0) | 2023.10.10 |
| circulatory system svg in korean (2) | 2023.10.07 |
| svg animation transform translate values (1) | 2023.10.05 |
| svg path animateMotion rotate attribute 3 : groupified object (0) | 2023.10.04 |
