Tại sao tôi không thể tham khảo gradient tuyến tính SVG được xác định trong một tệp bên ngoài (máy chủ sơn)?

Question

hãy có một cái nhìn tại Bút này:

http://codepen.io/troywarr/pen/VYmbaa

Những gì tôi đang làm gì ở đây là:

• xác định một biểu tượng SVG (<symbol>)
• xác định tập tin SVG lên tuyến tính gradient (<linearGradient>)
• sử dụng phần tử <use> để tham chiếu biểu tượng SVG mà tôi đã tạo
• trong CSS, xác định hai lớp:
  • external, có sự tham khảo gradient tuyến tính theo quy định tại this external .svg file (nhấp chuột phải và xem nguồn)
  • internal, có sự tham khảo gradient tuyến tính được định nghĩa trong HTML địa phương (đó là , tôi tin rằng, hiệu quả giống với một trong các tập tin bên ngoài)

Bởi vì tôi đã áp dụng các lớp internal tới phần tử <svg> ở dưới cùng o Ví dụ HTML, gradient được áp dụng, vẽ một dấu kiểm màu gradient màu xanh lam. Đó là những gì tôi theo sau.

Nhưng, nếu bạn chuyển đổi các lớp internal-external trong ví dụ HTML, dấu kiểm là không còn có thể nhìn thấy:

http://codepen.io/troywarr/pen/vEymKX

Khi tôi xem "Network" tab Chrome Inspector, tôi không thấy trình duyệt đang cố gắng tải tệp SVG. Có vấn đề gì với cú pháp của tôi không, hay có chuyện gì khác đang diễn ra ở đây?

Nó ít nhất trông như tôi đang làm điều này đúng, dựa trên một vài tài liệu tham khảo tôi đã tìm thấy:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• https://stackoverflow.com/a/7118142/167911

Nhưng , không có gì tôi đã cố gắng cho đến nay đã cho phép tôi tham khảo một gradient tuyến tính được xác định trong một bên ngoài .svg tệp.

Cảm ơn bạn đã trợ giúp!

Answer 1

Sau nhiều nghiên cứu hơn, có vẻ như đây là sự cố hỗ trợ trình duyệt. Xem:

• https://code.google.com/p/chromium/issues/detail?id=109212
• https://bugs.webkit.org/show_bug.cgi?id=105904

Đáng buồn thay, tôi muốn đi qua this question trước khi gửi bài của tôi, và đã nghĩ rằng chắc chắn, trong 5-1/2 năm, hỗ trợ trình duyệt sẽ bị bắt lên - nhưng đó không phải là trường hợp.

Tính đến năm 2015, rõ ràng Firefox và Opera là hai trình duyệt duy nhất hỗ trợ điều này theo bất kỳ cách nào đáng kể.

Quay lại bảng vẽ ...

Answer 2

Bạn có thể sử dụng svg4everybody với polyfill: true tùy chọn, nó sẽ chèn tất cả các biểu tượng bên ngoài thay vì use thẻ. Nhưng nó sẽ gây ra tải svg thứ hai.

Vì vậy, bạn có thể tải xuống svg bằng cách sử dụng yêu cầu ajax và sau đó chèn nó vào trang ẩn với các kiểu.

<script>var ajax=new XMLHttpRequest;ajax.open("GET","/img/svg-sprite.svg",!0),ajax.send(),ajax.onload=function(a){var b=document.createElement("div");b.classList.add("hidden"),b.innerHTML=ajax.responseText,document.body.insertBefore(b,document.body.childNodes[0])};</script> 

Trong trường hợp này:

/img/svg-sprite.svg - là con đường svg của bạn.

.hidden phong cách lớp:

.hidden { 
    position: absolute !important; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 

Và mã của bạn có thể trông như thế này:

<svg><use xlink:href="#logo"></use></svg>