如何使用 `` 标签设置嵌入 SVG 的样式？

将样式应用于嵌入式 SVG

与通过

技术说明

样式表仅适用于定义它们的文档的边界内。嵌入式 SVG 被视为独立的文档，因此外部定义的样式不会影响它们。

解决方案：基于脚本的样式插入

由于

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

这假设

替代方法

• 在 SVG 中包含样式表：从内部链接到外部样式表使用 ?xml-stylesheet 处理指令或 的 SVG 文件 中的元素
• 使用 jQuery-SVG 插件：利用 jQuery-SVG 插件将 JavaScript 和 CSS 样式应用到嵌入的 SVG。

直接 CSS定位

如果嵌入的 SVG 保存在单独的文件中，您可以定义针对

object[data="my-embedded-svg.svg"] {
  fill: #fff;
}

此方法不会将样式应用于 SVG 本身，但它对于调整嵌入元素的整体外观很有用。

以上是如何使用 `` 标签设置嵌入 SVG 的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！