Tôi có một trang, bao gồm một số tệp SVG. Để đồng bộ hóa kiểu dáng của các tệp SVG đó, tôi muốn tạo một biểu định kiểu duy nhất để giữ tất cả thông tin về kiểu dáng.Liên kết tới CSS trong SVG được nhúng bởi thẻ IMG
Tuy nhiên, khi bao gồm SVG như dưới đây, CSS sẽ không được áp dụng. Bất cứ ai có một giải pháp cho điều này hoặc là nó chỉ không thể liên kết đến các tập tin (CSS) khác trong một SVG tham chiếu bởi <img src="..." />?
Xem mã ví dụ bên dưới. Khi tải pic.svg trực tiếp trong trình duyệt, tất cả các kiểu được áp dụng và có thể thấy hình chữ nhật màu xanh lục. Nhưng khi mở page.htm tất cả những gì có thể thấy là một hình chữ nhật màu đen. Vì vậy, rõ ràng là không có kiểu dáng đã xác định nào được áp dụng.
page.htm
<!DOCTYPE html>
<html>
<body>
<img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>
pic.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<rect x="10" y="10" width="80" height="80" />
</svg>
styles.css
rect {
stroke: black;
fill: green;
}
EDIT
Từ câu trả lời, trong một thời gian ngắn xuất hiện ở đây, tôi nhận được this link to the spec và trích dẫn sau đây. Theo quan điểm của tôi, các mã trên sẽ hoạt động!
tài liệu SVG Stand-alone nhúng trong một tài liệu HTML hay XML với 'img', 'đối tượng' (HTML) hoặc 'image' (SVG) yếu tố
[...]
Trích dẫn từ liên kết của bạn "style sheets định nghĩa bất cứ nơi nào trong tài liệu SVG tham chiếu (trong yếu tố phong cách hoặc các thuộc tính phong cách, hoặc trong style sheet bên ngoài liên kết với các hướng dẫn xử lý style sheet) áp dụng trên toàn bộ tài liệu SVG, nhưng không một hoàn thiện tài liệu tham chiếu (có thể là HTML hoặc XHTML). "
Nhưng trong trường hợp đó tôi lại có một định nghĩa kiểu cho mỗi tệp SVG. Và làm thế nào mà liên quan đến trích xuất spec tôi đăng? – Sirko
Nếu bạn muốn chia sẻ các định nghĩa kiểu, bạn không thể sử dụng thẻ hình ảnh. Các vấn đề bảo mật có xu hướng ghi đè các yêu cầu đặc điểm kỹ thuật mà thường không xem xét những thứ như vậy. –
Rõ ràng, điều này cũng có nghĩa là bạn không thể tham chiếu đến phông chữ bên ngoài từ tệp SVG được tải qua tệp HTML. –