Question

我有一个svg定义为＆＃34; header.svg＆＃34;它也有造型。现在我想在我的html中使用这个svg：

<svg class="hamburger" ><use xlink:href="images/header.svg#hamburger" /></svg>

我得到了图像，但它是黑色的。 header.svg中的样式不包括在内。那是为什么？

Answer 1

不，因为样式不适用于文档边界。

但是，因为你可以使用＆lt; object＆gt;使用脚本将样式表插入svg文档的标记。

这样的事情，请注意，此代码假定已完全加载：

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

当然，您也可以直接从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 <use>不包括样式

1 个答案: