SVG 이미지
<image> 요소
SVG 요소 내부에 비트맵 이미지를 포함하고자 한다면 <image>
요소를 사용합니다. HTML <img>
요소와 사용법은 유사합니다. 하지만 xlink:href
, x
, y
속성을 제공하는 반면 alt
속성은 제공하지 않습니다. 왜? alt
속성을 제공하지 않는지 모르겠지만, 다행히 대체 텍스트는 WAI-ARIA aria-label
속성을 사용해 제공할 수 있습니다.
<svg width="600" height="300">
<image
xlink:href="https://images.unsplash.com/photo-1523960909462-292b75d8ab2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5db68bd70a4783ce3917d48810c45c40&auto=format&fit=crop&w=400&q=60"
x="105"
y="15"
width="400"
height="267"
aria-label="동양의 고성 기와 지붕" />
</svg>

주의사항
SVG 요소 내부에 <image>
요소를 사용할 때 다음의 특성에 주의하여 사용하여야 합니다.
x
또는y
속성을 설정하지 않으면0
이 됩니다.height
또는width
속성을 설정하지 않으면,0
이 됩니다.height
또는width
속성이0
이면 이미지는 표시되지 않습니다.
Last updated