我正在努力找出如何重用 *.svg 文件的正确方法，方法是将它们放置在我的 HTML 站点中的不同位置，但在不使用 JavaScript 的情况下应用不同的样式表。
来自 index.html 的片段:
<OBJECT type="image/svg+xml" data="myLogo.svg" class="svglogo">
<img src="svglogo_fallback.png">
</OBJECT>
我的标志.svg:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" class="mySvg" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
<defs>
<style type="text/css"><![CDATA[
.mySvg .teste {
fill: red;
}
]]></style>
</defs>
<path class="teste" fill="#000000" d="abcdefg"/>
</svg>
在 *.svg 中看到的一种可能性是使用 CSS 将填充更改为红色，这非常有效，但也意味着每个嵌入的 myLogo.svg 都会变成红色。
有什么方法可以在不使用 JavaScript 的情况下为嵌入对象分配适当的 CSS 样式？
最佳答案
我不是 100% 确定您想要什么，但我很确定答案是您无法按照自己的意愿做事。我认为这个问题是相关的:How to apply a style to an embedded SVG?
关于html - 将 svg 嵌入到 html 中的可重用性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11592570/