CSS 样式是否可以应用于嵌入 `` 标签内的 SVG？-css教程-PHP中文网

CSS 样式是否可以应用于嵌入 `` 标签内的 SVG？

Susan Sarandon

发布： 2024-12-21 18:37:16

原创

109 人浏览过

Can CSS Styles Be Applied to SVGs Embedded within an `` Tag?

嵌入式 SVG 的 CSS 样式

使用

简短回答：否

CSS 样式不会遍历文档边界。在这种情况下，标签有效地在包含文档和嵌入的 SVG 之间创建了边界。

替代方法

幸运的是，还有其他方法来设置嵌入式 SVG 的样式：

1。编程样式表插入：

使用 JavaScript，可以将样式表直接插入到

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

登录后复制

2.外部样式表引用：

A 可以插入元素来引用外部样式表：

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

登录后复制

3. CSS 导入（@import 规则）：

第一种方法可用于插入样式元素，然后添加 @import 规则：

styleElement.textContent = "@import url(my-style.css)";

登录后复制

4.直接 SVG 样式表链接：

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">
  ... (SVG content) ...
</svg>

登录后复制

5. jquery-svg 插件：

jquery-svg 插件提供了另一种将 JavaScript 和 CSS 样式应用于嵌入式 SVG 的方法。

以上是CSS 样式是否可以应用于嵌入 `` 标签内的 SVG？的详细内容。更多信息请关注PHP中文网其他相关文章！