Bao gồm tệp SVG trong SVG

Question

Tôi có một linearGradient trong phần defs của tệp SVG của tôi và tham chiếu nó bằng fill = "url (#myGradientName)". Điều đó hoạt động tốt cho đến nay.

Tôi nghĩ rằng tôi có thể đặt toàn bộ phần def trong tệp SVG của riêng mình và sau đó chỉ tham khảo từ tất cả hình ảnh SVG của tôi. Đó là, một cái gì đó như:

styles.svg:

<svg xmlns=...> 
    <defs> 
    <linearGradient id="myGradient" ...> 
    </linearGradient> 
    </defs> 
</svg> 

image.svg:

<svg xmlns=...> 
    <rect width="100" height="100" fill="styles.svg#myGradient"/> 
</svg> 

Nhưng tôi dường như không thể có được phong cách để áp dụng. Tôi có sai cú pháp cho các ID bên ngoài tệp này (styles.svg # myGradient) không? Tôi có cần phải bao gồm một cách rõ ràng tệp đầu tiên không?

Tôi đã đổ qua thông số SVG và có vẻ như điều này sẽ là có thể, nhưng không có ví dụ nào thực sự cho thấy nó đang được thực hiện.

Chỉnh sửa: FOP FAQ gợi ý rằng cú pháp đúng là điền = "url (grad.svg # PurpleToWhite)", nhưng điều đó không hoạt động trong Gecko hoặc Webkit. Điều đó có đúng không và không ai hỗ trợ nó, hay tôi đang làm điều gì khác sai?

Answer 1

Có vẻ như điều này chỉ được hỗ trợ theo số Firefox 3.1.

Answer 2

Thực ra, Câu hỏi thường gặp về FOP là đúng, cú pháp chính xác sẽ bao gồm URI với url(...). Chỉ cần kiểm tra với Firefox của tôi, và nó xử lý đầy chỉ chỉ với xung quanh url(). Nó sẽ là một lỗi trong Safari hoặc Opera, nếu nó sẽ xử lý nó một cách khác nhau.

Tôi tình cờ đệ trình một số similar question, nhưng với thành công tương tự ít.

Chúc mừng,

Answer 3

Bạn cần phải nói fill="url(styles.svg#myGradient)". Điều đó làm việc trong Firefox 4 beta 6 và tôi tưởng tượng nó hoạt động trong Firefox 3.5. Nhưng Chrome (7.0.517.41 beta) và bản beta IE9 (9.0.7930.16406) vẫn không hỗ trợ điều này. Có vẻ như cả hai đều tìm kiếm #myGradient trong tài liệu hiện tại thay vì thực sự truy cập URL được chỉ định. Tổng.

Dưới đây là các tập tin hoàn chỉnh tôi sử dụng để kiểm tra điều này:

styles.svg

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <linearGradient id="myGradient"> 
     <stop offset="0" stop-color="red" /> 
     <stop offset="1" stop-color="black" /> 
    </linearGradient> 
    </defs> 
</svg> 

image.svg

<svg xmlns="http://www.w3.org/2000/svg"> 
    <rect width="100" height="100" fill="url(styles.svg#myGradient)"/> 
</svg>