造型相同SVG <object>不同的方式

我想用不同的颜色在一个页面上有一系列相同的SVG文件。我知道将SVG放入页面而不会膨胀代码并且仍然具有外部风格的最佳方法是通过<object>标签。造型相同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>标签定位到CSS中操纵SVG的fill属性时存在问题。

将.red选择器关闭样式表并使.svg-circle选择器保持原样 - 将圆圈变为红色，但我希望能够在页面上使用不同的颜色。

任何帮助非常感谢！

如果我不能破解这个，我可能会诉诸老式的.png精灵表。

来源

2016-01-20 Grimmie

见https://css-tricks.com/using-svg/，部分“使用SVG作为<object>”：

[...]如果你想的CSS的东西的工作，你无法使用的文档外部样式表或<style>，则需要在SVG文件本身内部使用<style>元素。

因此，似乎无法通过CSS从对象的“外部”对object内的SVG元素进行样式设置。

来源

2016-01-20 14:16:28 CBroe

正如CBroe所说，它是一个样式化外部对象的问题。你可以通过JS访问它并改变它，但我怀疑这是理想的，并且存在确保其首先被加载的问题等。

然而，我不相信这是你说的最好的方法，除非有一些其他的要求（例如，没有javascript或libs，它必须是外部的，你仍然可以通过Snap load方法加载它，例如，如果你支持js的话）。

您可以简单地使用defs/use语句。我只是为了简洁而使用了一个圆圈，但是你可以有一个更复杂的路径或者其他任何东西。

jsfiddle

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"> 
    <defs> 
    <style> 
     .svg-circle { 
     fill-rule: evenodd; 
     fill: 'red'; 
     } 
    </style> 
    <circle id="myDefsCircle" class="svg-circle" r="20" cx="100" cy="100"/> 
    </defs> 

    <use x="10" y="0" xlink:href="#myDefsCircle" style="fill:red"/> 
    <use x="10" y="50" xlink:href="#myDefsCircle" style="fill:blue"/> 
    <use x="10" y="100" xlink:href="#myDefsCircle" style="fill:green"/> 
</svg>

来源

2016-01-20 14:20:51 Ian

造型相同SVG <object>不同的方式

回答

相关问题