Làm thế nào để áp dụng một phong cách cho một SVG nhúng?

Question

Khi một SVG được bao gồm trực tiếp trong tài liệu bằng cách sử dụng thẻ <svg>, bạn có thể áp dụng kiểu CSS cho SVG thông qua biểu định kiểu của tài liệu. Tuy nhiên, tôi đang cố gắng áp dụng một kiểu cho một SVG được nhúng (sử dụng thẻ <object>).

Có thể sử dụng bất kỳ thứ gì như mã sau không?

object svg { 
    fill: #fff; 
} 

Answer 1

Câu trả lời ngắn gọn: không, vì kiểu không áp dụng trên biên giới tài liệu.

Tuy nhiên, vì bạn có thẻ <object>, bạn có thể chèn biểu định kiểu vào tài liệu svg bằng tập lệnh.

Something như thế này, và lưu ý rằng mã này giả định rằng các <object> đã nạp đầy đủ:

var svgDoc = yourObjectElement.contentDocument; 
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style"); 
styleElement.textContent = "svg { fill: #fff }"; // add whatever you need here 
svgDoc.getElementById("where-to-insert").appendChild(styleElement); 

Nó cũng có thể chèn một yếu tố <link> để tham khảo một stylesheet bên ngoài:

var svgDoc = yourObjectElement.contentDocument; 
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link"); 
linkElm.setAttribute("href", "my-style.css"); 
linkElm.setAttribute("type", "text/css"); 
linkElm.setAttribute("rel", "stylesheet"); 
svgDoc.getElementById("where-to-insert").appendChild(linkElm); 

Tuy nhiên, một tùy chọn khác là sử dụng phương thức đầu tiên, để chèn phần tử kiểu và sau đó thêm quy tắc @import, ví dụ: styleElement.textContent = "@import url(my-style.css)".

Tất nhiên bạn có thể liên kết trực tiếp đến biểu định kiểu từ tệp svg, mà không cần thực hiện bất kỳ tập lệnh nào. Một trong những điều sau đây nên làm việc:

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet href="my-style.css" type="text/css"?> 
<svg xmlns="http://www.w3.org/2000/svg"> 
    ... rest of document here ... 
</svg> 

hay:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <link href="my-style.css" type="text/css" rel="stylesheet" 
      xmlns="http://www.w3.org/1999/xhtml"/> 
    </defs> 
    ... rest of document here ... 
</svg> 

Cập nhật 2015: bạn có thể sử dụng jquery-svg plugin cho áp dụng script js và phong cách css đến một SVG nhúng.

Answer 2

Bạn có thể thực hiện việc này mà không cần javsscrpt bằng cách đặt khối kiểu với kiểu của bạn bên trong tệp SVG.

<style type="text/css"> 
path, 
circle, 
polygon { 
    fill: #fff; 
    } 
</style>