Hãy tưởng tượng SVG sau:hình ảnh liên kết bên SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="foo.png" x="0" y="0" width="100" height="100"/>
</svg>
Hình ảnh, foo.png, nằm trong cùng thư mục. Nếu chúng ta mở SVG này trong trình duyệt, nó sẽ hiển thị chính xác foo.png. Nhưng nếu chúng tôi cố gắng sử dụng SVG này trong <img src="..."> hoặc trong <image xlink:href="..."/> bên trong SVG khác, sẽ không có hiển thị foo.png. Đã thử nghiệm với Firefox và Chrome mới nhất, cả hai đều có tệp: // và http: //. Không có gì trong giao diện điều khiển của cả hai trình duyệt, và màn hình mạng cho thấy không có nỗ lực để tải một bitmap.
Tôi có thiếu gì đó không? Tôi biết mọi thứ sẽ ổn nếu tôi nhúng foo.png thành "data: image/svg + xml; base64, ...", nhưng tôi thực sự muốn tránh điều đó. Các ảnh bitmap mà tôi đang cố gắng đưa vào có thể khá lớn, vì vậy tôi thích sử dụng liên kết thay vì nhúng.
thể trùng lặp của [một SVG có thể bao gồm trong HTML với một thẻ "img" có một liên kết đến một hình ảnh bên ngoài với từ khóa "hình ảnh"?] (http://stackoverflow.com/questions/11352985/can-an-svg-included-in-html-with-an-img-tag-have-a-link-to-an-external-image-w) –
bạn có thể sử dụng '' thay vào đó – Damien