Applying CSS Styles to Embedded SVGs
When including an SVG directly into a document using the
Short Answer: No
CSS styles cannot cross document boundaries, including those between the main document and the embedded SVG.
Alternative Solutions
Since an
var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // style as desired
svgDoc.getElementById("where-to-insert").appendChild(styleElement);Additionally, you can insert a element to an external stylesheet:
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);Direct Linking
You can also link to the stylesheet directly from the SVG file, without scripting:
<?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>
Additional Option: JQuery-SVG Plugin
As of 2015, you can apply JS scripts and CSS styles to embedded SVGs using the jquery-svg plugin.
The above is the detailed content of Can CSS Styles Be Applied to SVGs Embedded Using the `` Tag?. For more information, please follow other related articles on the PHP Chinese website!
What is the difference between legacy and uefi?
flex tutorial
Introduction to hard disk performance indicators
SpringBoot project building steps
Where are the number of online viewers at station b?
html web page production
What are the java text editors
What should I do if msconfig cannot be opened?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
