Làm cách nào để áp dụng một kiểu cho SVG được nhúng?

107

Khi SVG được đưa trực tiếp vào tài liệu bằng cách sử dụng <svg> thẻ, 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 SVG được nhúng (sử dụng <object>thẻ).

Có thể sử dụng bất cứ điều gì chẳng hạn như mã sau đây?

object svg { 
    fill: #fff; 
}

html css svg

— Joshua Sortino
nguồn

Tôi đã nghĩ ra một cách gọn nhẹ để thực hiện việc này, sẽ rất hiệu quả cho những gì bạn đang cố gắng làm. Xem phần Hỏi & Đáp này: stackoverflow.com/questions/11978995/…

— Drew Baker

Dưới đây là một câu trả lời mà thực sự được công việc làm (từ Thao tác khách sạn kiểu tập tin svg bên ngoài với CSS .)

— Fabien Snauwaert

Câu trả lời:

108

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

Tuy nhiên, vì bạn có một <object> thẻ nên bạn có thể chèn biểu định kiểu vào tài liệu svg bằng cách sử dụng script.

Một cái gì đó như thế này và lưu ý rằng mã này giả định rằng <object>đã được tải đầ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);

Cũng có thể chèn một <link>phần tử để tham chiếu một biểu định kiểu 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, tùy chọn khác là sử dụng phương pháp đầu tiên, để chèn một yếu tố phong cách, và sau đó thêm một quy tắc @import, ví dụ styleElement.textContent = "@import url(my-style.css)".

Tất nhiên, bạn cũng 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 hai cách sau sẽ hoạt động:

<?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>

hoặc là:

<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 plugin jquery-svg để áp dụng tập lệnh js và kiểu css cho SVG được nhúng.

— Erik Dahlström
nguồn

Đây có phải là một phương pháp để liên kết một biểu định kiểu bên ngoài không? Nếu không, điều đó có khả thi không?

— Joshua Sortino

Ở trên chèn một phần tử kiểu vào svg. Có, bạn cũng có thể chèn một phần tử liên kết xhtml để liên kết với một biểu định kiểu bên ngoài hoặc có thể là một hướng dẫn xử lý biểu định kiểu xml (xem w3.org/Style/styling-XML.html ).

— Erik Dahlström

Điều này thật tuyệt vời Erik! Tuy nhiên, tôi không thể quản lý để thủ thuật này hoạt động trong Chrome mà không bao gồm svgweb: code.google.com/p/svgweb ... Bạn có biết tôi đang làm gì sai không?

— Matt WD

@ MattW-D: có lẽ bạn chỉ nên mở một câu hỏi mới cho điều đó. Svgweb không cần thiết trong chrome.

— Erik Dahlström

Cảm ơn Erik, thực sự đã rất vất vả khi cố gắng làm cho font-face hoạt động trong svg thông qua css, liên kết css với svg đã hoạt động đầu tiên, hãy thử và trình duyệt chéo một cách thần kỳ!

— Dave

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

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

— R Reveley
nguồn

Nếu lý do duy nhất cho việc sử dụng thẻ để chèn SVG là bạn không muốn làm lộn xộn mã nguồn của mình với đánh dấu từ SVG, bạn nên xem xét các bộ tiêm SVG như SVGInject .

Việc đưa vào SVG sử dụng Javascript để đưa tệp SVG vào nội tuyến vào tài liệu HTML của bạn. Điều này cho phép mã nguồn HTML sạch sẽ trong khi vẫn làm cho SVG có thể định kiểu hoàn toàn bằng CSS. Một ví dụ cơ bản như sau:

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

— Waruyama
nguồn

Tuyệt vời! Cảm ơn vì công cụ gọn gàng.

— Deleplace