SVG "lấp đầy: url (# ....)" hành vi lạ trong Firefox

Question

Tôi có sau SVG đồ họa:

<svg width='36' height='30'> 
    <defs> 
    <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/> 
     <stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/> 
    </linearGradient> 
    <linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/> 
     <stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/> 
    </linearGradient> 
    <linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/> 
     <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/> 
    </linearGradient> 
    </defs> 

    <text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text> 
</svg>' 

tôi đặt fill thuộc tính của phần tử text thông qua CSS và chuyển đổi giữa các loại gradient tùy thuộc vào trạng thái di chuột. Điều này hoạt động tốt trong Chrome & Safari, nhưng trong Firefox, văn bản không hiển thị. Khi kiểm tra phần tử, tôi phát hiện ra rằng Firefox đang thêm none vào cuối thuộc tính CSS fill: url(#...) của mình. Tôi đã thử xóa từ khóa none bằng Firebug, nhưng Firebug chỉ xóa toàn bộ thuộc tính. Tại sao chuyện này đang xảy ra?

EDIT: tôi nên lưu ý rằng nếu tôi loại bỏ CSS mà đặt fill bất động sản, và hardcode thuộc tính fill vào text yếu tố (không thông qua một thuộc tính inline style), hiển thị văn bản đúng trong tất cả các trình duyệt.

Answer 1

Đã tìm ra. Trong CSS của tôi, tôi đã đề cập đến các gradient trong cùng một cách tôi ban đầu được tham khảo inline điền:

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

Để có được nó làm việc trong Firefox, tôi đã phải thay đổi nó như thế này:

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

Không chắc chắn tại sao lại như vậy. Có lẽ nó có liên quan đến cấu trúc thư mục chứa biểu định kiểu của tôi?

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

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

Giải pháp

cho inline (cả bên ngoài và nội bộ css.) tạo kiểu, đ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;

Answer 3

Tôi đã gặp sự cố tương tự với linearGradient trong SVG - vẫn còn trong năm 2017. Tôi đoán, vấn đề là Firefox xử lý url('#gradient-id') như URL bình thường và quy tắc áp dụng của <base href=""/> thẻ meta. Bình luận nó ra và kiểm tra sau đó.