Độ dốc tuyến tính SVG không hoạt động trong Safari

Question

Tôi có một đối tượng SVG chứa một dốc tuyến tính được nhúng trực tiếp trong tài liệu. Nó hoạt động tốt trong Chrome và Firefox, nhưng trong Safari không có gì được hiển thị. Nếu tôi tạo SVG như một tệp và nhúng nó bằng cách sử dụng thẻ Object, nó hoạt động tốt trong Safari. Hình dạng khác và điền vào làm việc, nó chỉ gradient tuyến tính mà không hoạt động. Tôi đoán tôi có thể sử dụng đối tượng, nhưng tôi muốn nhúng trực tiếp SVG.

tôi đã tạo ra một bản demo ở đây (chỉ hoạt động trong Chrome, Safari không): http://jsfiddle.net/sjKbN/

Tôi đã xem qua this answer mà đề nghị thiết lập các kiểu nội dung để application/xhtml+xml, nhưng điều này bản thân nó dường như gây ra các vấn đề khác.

Chỉ cần tự hỏi liệu có ai đã gặp bất kỳ bản sửa lỗi hoặc ý tưởng nào khác để làm việc này không.

Answer 1

dốc của bạn sẽ làm việc trong Safari nếu bạn quấn một thẻ defs xung quanh nó:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
<defs> 
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5"> 
    <stop offset="0" style="stop-color:#FFF33B"/> 
    <stop offset="0.0595" style="stop-color:#FFE029"/> 
    <stop offset="0.1303" style="stop-color:#FFD218"/> 
    <stop offset="0.2032" style="stop-color:#FEC90F"/> 
    <stop offset="0.2809" style="stop-color:#FDC70C"/> 
    <stop offset="0.6685" style="stop-color:#F3903F"/> 
    <stop offset="0.8876" style="stop-color:#ED683C"/> 
    <stop offset="1" style="stop-color:#E93E3A"/> 
</linearGradient> 
</defs> 
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/> 
</svg> 

Dường như gói tài liệu tham khảo của bạn trong defs được khuyến khích nhưng không bắt buộc according to spec. Đây là lỗi trong Safari.

Answer 2

Giới thiệu về Alpha: Có vẻ như Safari (7 tại thời điểm này) không bao gồm kênh alpha màu SVG, sử dụng thuộc tính độ mờ dừng. nó hoạt động tốt!

<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work 
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok