จะใช้สไตล์กับ SVG แบบฝังได้อย่างไร?

Question 1

เมื่อ SVG รวมอยู่ในเอกสารโดยตรงโดยใช้<svg>แท็กคุณสามารถใช้สไตล์ CSS กับ SVG ผ่านสไตล์ชีทของเอกสาร อย่างไรก็ตามฉันกำลังพยายามใช้สไตล์กับ SVG ซึ่งฝังอยู่ (โดยใช้<object>แท็ก)

เป็นไปได้ไหมที่จะใช้รหัสต่อไปนี้?

object svg { 
    fill: #fff; 
}

Question 2

คำตอบสั้น ๆ : ไม่เนื่องจากสไตล์จะไม่ใช้กับขอบเขตเอกสาร

อย่างไรก็ตามเนื่องจากคุณมี<object>แท็กคุณสามารถแทรกสไตล์ชีตลงในเอกสาร svg โดยใช้สคริปต์

สิ่งนี้และโปรดทราบว่ารหัสนี้ถือว่า<object>ได้โหลดเต็มที่แล้ว:

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);

นอกจากนี้ยังสามารถแทรก<link>องค์ประกอบเพื่ออ้างอิงสไตล์ชีตภายนอก:

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);

แต่อีกทางเลือกหนึ่งคือการใช้วิธีแรกที่จะแทรกองค์ประกอบสไตล์และจากนั้นเพิ่มกฎ @import styleElement.textContent = "@import url(my-style.css)"การเช่น

แน่นอนว่าคุณสามารถเชื่อมโยงไปยังสไตล์ชีทจากไฟล์ svg ได้โดยตรงโดยไม่ต้องเขียนสคริปต์ใด ๆ ข้อใดข้อหนึ่งต่อไปนี้ควรใช้งานได้:

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

หรือ:

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

อัปเดต 2015: คุณสามารถใช้ปลั๊กอินjquery-svgเพื่อใช้สคริปต์ js และสไตล์ css กับ SVG แบบฝัง

Question 3

คุณสามารถทำได้โดยไม่ต้องใช้ javsscrpt โดยใส่ style block ที่มีสไตล์ของคุณไว้ในไฟล์ SVG นั้นเอง

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

Question 4

ถ้าเหตุผลเดียวสำหรับการใช้แท็กเพื่อ inlcude SVG คือการที่คุณไม่ต้องการที่จะถ่วงรหัสต้นฉบับของคุณมาร์กอัปจาก SVG ที่คุณควรจะดูที่หัวฉีด SVG เหมือนSVGInject

SVG injection ใช้ Javascript เพื่อแทรกไฟล์ SVG แบบอินไลน์ลงในเอกสาร HTML ของคุณ สิ่งนี้ช่วยให้สามารถสร้างซอร์สโค้ด HTML ที่สะอาดในขณะที่ทำให้ SVG มีสไตล์ได้อย่างสมบูรณ์ด้วย CSS ตัวอย่างพื้นฐานมีลักษณะดังนี้:

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