Độ phân giải SVG chuyển sang màu đen khi có thẻ BASE trong trang HTML?

Question

Tôi đang sử dụng Thư viện JavaScript Raphaël để tạo các phần tử SVG trong một trang HTML và sử dụng CodeIgniter như một khung công tác PHP. Trong khuôn khổ CodeIgniter tôi cần thêm một thẻ <base> vào phần đầu của tài liệu HTML để sử dụng JS, CSS và hình ảnh, nhưng nó gây ra một vấn đề lạ trong phần tử SVG.

Khi tôi sử dụng thẻ <base>, độ dốc không hoạt động. Thay vào đó, đối tượng chuyển sang màu đen. Nó hoạt động giống hệt với các đối tượng đường dẫn đầy ảnh.

Tập lệnh gradient mẫu là here.

Answer 1

SVG Gradients được định nghĩa trong tài liệu với một id thuộc tính duy nhất, và sau đó tham chiếu từ một yếu tố khác như một URL . Điển hình là các URL mới chỉ là đoạn nhận dạng, ví dụ .:

<defs> 
    <linearGradient id="foo" ...>...</linearGradient> 
</defs> 
<rect fill="url(#foo)" ... /> 

Nếu bạn giới thiệu một yếu tố <base> với một thuộc tính href, bạn thay đổi ý nghĩa của URL như vậy trong tài liệu. Thay vì được tính toán liên quan đến tài liệu hiện tại, chúng được tính toán liên quan đến URI riêng biệt được chỉ định.

Answer 2

định nghĩa độ dốc của bạn là nhận được hỏng Cũng đôi khi có những vấn đề với Opera cho tập quán nhất định của các đối tượng Gradient điền

Answer 3

cũng thấy báo cáo lỗi sau: https://bugzilla.mozilla.org/show_bug.cgi?id=652991

rõ ràng, khái niệm về tham khảo (gradient fill hoặc đánh dấu kết thúc, tôi nghi ngờ, quá) bằng URL là vấn đề đối với các ứng dụng AJAX kiểu đó cũng sử dụng lịch sử .pushState().

Answer 4

Tôi gặp vấn đề tương tự - gradient được hiển thị màu đen trong Chrome, nhưng tôi thậm chí không có thẻ <base>.

Thay đổi

<stop offset="1" style="stop-color:#F26722"/> 

để

<stop offset="1" stop-color="#F26722"/> 

dường như khắc phục vấn đề.

Một lỗi không liên quan khác là Chrome không thể phân tích cú pháp transform="translate(...)" trên các yếu tố <g>, tôi phải di chuyển chúng sang từng cá nhân <path> -s.