Firefox SVG với điền: url (#ID) phong cách kiểu dáng bên ngoài bị phá vỡ, phong cách nội tuyến cũng tốt

Question

Trong Firefox mà thôi, nếu tôi cố gắng để đưa ra một con đường svg một tài liệu tham khảo mô hình như:

đường { điền: url (#ref); }

trong biểu định kiểu bên ngoài, nó hiển thị ẩn. Nếu tôi làm nội tuyến, hoặc trong một thẻ trên trang, nó hoạt động.

Đây là fiddle của tôi, và đây là bãi chứa mã của tôi vì SO sẽ không cho phép tôi đăng chỉ là fiddle. http://jsfiddle.net/v5VDp/1/

<pattern id="texture_base" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213"> 
     <image x="0" y="0" width="213" height="122" xlink:href=""/> 
    </pattern> 

     <pattern id="texture1" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213"> 
     <rect fill='url(#color1)' stroke="none" x="0" y="0" width="213" height="122"/> 
      <rect fill='url(#texture_base)' x="0" y="0" width="213" height="122"/ /> 

    </pattern> 
</defs> 
</svg> 

.slice: nth-con (6n + 2) đường dẫn { điền: url (# texture1); }

https://dl.dropbox.com/s/wkzaoiwnw6ghsmd/simple_svg_test.css

Answer 1

#texture1 là viết tắt của <url of this file> + #texturl. Vì vậy, trong một biểu định kiểu bên ngoài, #texture1 sẽ trỏ đến một cái gì đó trong bản định kiểu mà sẽ không được tìm thấy khi phần tử nằm trong tệp svg.

Webkit luôn có lỗi này gây ra nhiều nhầm lẫn. Bạn nên tìm Opera phù hợp với hành vi của Firefox cũng như IE.

Nếu bạn muốn thực hiện việc này trong biểu định kiểu, bạn phải sử dụng URL tuyệt đối, ví dụ: url (http://jsfiddle.net/v5VDp/1/#texture1)

Điều này được bao gồm trong số CSS specification. Bạn luôn có thể liên hệ với CSS working group and suggest that they do something about it.

Answer 2

SVG “fill: url (# ...)” có biểu hiện lạ trong Firefox khi chúng ta gán mã dưới đây với css (cả bên ngoài và nội bộ css.)

#myselector { 
fill: url('#gradient-id'); 
} 

Giải pháp

cho kiểu nội tuyến điều này có thể được thực hiện theo cả hai cách. Tĩnh hoặc động cách

động cách

.attr('fill', 'url(#gradient-id)') 

cách tĩnh

fill="url(#gradient-id)" 

Trong tĩnh bạn phải đặt này trong SVG Html;