我想在不同颜色的页面上放置一系列相同的 SVG 文件。我知道在不膨胀代码的情况下将 SVG 放入页面的最佳方法,并且仍然具有外部样式,是通过 <object>
标签。
这是我目前所拥有的:
HTML
<object type="image/svg+xml" data="images/circle.svg" class="object-circle red" >
<!-- fallback image in CSS -->
</object>
<object type="image/svg+xml" data="images/circle.svg" class="object-circle blue" >
<!-- fallback image in CSS -->
</object>
CSS
.object-circle {
height:16px;
width:16px;
}
.red .svg-circle {
fill:#f00;
}
.blue .svg-circle {
fill:#00f;
}
SVG
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<defs>
<style>
.svg-circle {
fill-rule: evenodd;
}
</style>
</defs>
<path class="svg-circle" d="M200,398.688A199.552,199. ..."/>
</svg>
这只是行不通。我认为针对 <object>
存在问题标签来操作 SVG 的 fill
CSS 中的属性。
以.red
选择器离开样式表并留下 .svg-circle
适当的选择器按预期工作 - 将圆圈变成红色,但我希望能够在页面上有几个不同颜色的圆圈。
非常感谢任何帮助!
如果我不能破解这个,我可能会求助于老式的 .png Sprite 表。
最佳答案
参见 https://css-tricks.com/using-svg/ , “使用 SVG 作为 <object>
”:
[…] if you want the CSS stuff to work, you can't use an external stylesheet or
<style>
on the document, you need to use a<style>
element inside the SVG file itself.
因此似乎无法在 object
中设置 SVG 元素的样式。通过 CSS 从对象“外部”。
关于html - 以不同方式设置相同 SVG <object> 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34902224/