Question

以下示例中的样式存在问题：

外部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 xmlns="http://www.w3.org/2000/svg"> <defs> <style>.cls-1{fill:#333;fill-rule:evenodd;}</style> </defs> <symbol id="1" viewBox="0 0 24 32"> <title>2</title> <path class="cls-1" d="M50,66S38,52.63,38,46a12,12,0,0,1,24,0C62,52.63,50,66,50,66Zm0-16a4,4,0,1,1,4-4A4,4,0,0,1,50,50Z" transform="translate(-38 -34)"/> </symbol> </svg>：

cls-1

当我尝试使用以下代码加载它时，Chrome和Firefox不尊重<svg width="100px"><use xlink:href="file.svg#1"></use></svg>类，但它适用于Opera。

public String name

如果你想知道为什么我需要它，我有一堆svg图标，我将它们与gulp-svgstore合并到单个svg.file中，所以我的真实文件中有很多符号。

Answer 1

这是一个错误，根据SVG specs on <use> elements，应用于引用元素的样式应该出现在深层克隆中，以W3字样出现：

对于支持使用CSS设置样式的用户代理，生成的'g' 元素随身携带＆＃34;级联＆＃34;财产价值 'use'元素，来自CSS级联[...]。此外，引用资源的副本（深度克隆）也包含随之而来的是＃34;级联＆＃34; CSS产生的属性值在原始（即引用的）元素上级联。因此，结果各种CSS选择器与'class'和'style'相结合实际上，属性被替换为a的功能等价物传达的内容中的'style'属性＆＃34;级联＆＃34;财产价值。

从2010年开始，Mozilla的bugzilla确实拥有a report，但此后似乎没有任何改变。

我不知道您使用的是哪个版本的Opera，但是在osX上的v34.0上，它也无法正常工作。

最好的办法是通过设置内联符号的样式来解决此问题。

请注意，在Firefox和Safari中，如果你在主文档中附加了<input type="button" value="button" data-colors='["blue", "buttonface"]' onclick="this.style.background = JSON.parse(this.dataset.colors)[0]; this.dataset.colors = JSON.stringify(JSON.parse(this.dataset.colors).reverse());" />元素，那么类选择器将正常工作，不幸的是，Blink（chrome + opera）并不能很好地完成它...

Answer 2

您应该能够在外部SVG内使用all: inherit; CSS属性，这将允许use元素上的样式向下层叠到SVG中： https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

使用符号设置外部SVG文件的样式

2 个答案: