CSS通过“all:unset”中断内联SVG重置
当使用CSS重置时，如下所示
* {
all: unset;
}未正确显示内联SVG图形，请参阅https://jsfiddle.net/593qysxp/1/
我已经在Safari 11和Chrome 61上测试过这一点。
我试图通过将svg元素设置为display: block或all: initial来解决这个问题，但这并没有帮助。
有人有解决办法吗？
回答 2
Stack Overflow用户
发布于 2017-10-15 23:03:30
如果您想完全保持SVG内容的独处而不重置其中的任何内容，则可以使用
@namespace svg "http://www.w3.org/2000/svg";
:not(svg|*) {
all: unset;
}Stack Overflow用户
发布于 2017-10-15 22:37:03
SVG 2现在将许多属性定义为表示属性，这些属性是SVG1.1中的真正XML属性。其中包括用于<ellipse>元素的cx、cy、rx、ry和<path>元素的d属性。
这样做的结果是，当这些属性作为元素上的属性写入时，将被视为CSS属性。这就是为什么它们被all: unset覆盖的原因。(根据SVG1.1规则，见下文增编)。
这同样意味着它们可以在style属性中声明，在该属性中，它们比任何样式表都具有更高的特性。
由于并非所有浏览器都实现了这些表示属性，因此现在必须将它们作为属性和样式属性双重声明。结果看起来很奇怪，如果你问我：
* {
all: unset;
}
head, link, meta, script, style, title {
display: none;
}
div {
display: block;
}
.icon {
width: 4rem;
}<div>
<svg class="icon icon--search" viewBox="0 0 20 20"
version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="14.159" cy="5.87" rx="5.89" ry="5.849"
style="fill:none;stroke:#000000;stroke-width:1px;cx:14.159px;cy:5.87px;rx:5.89px;ry:5.849px"/>
<path d="M10,10l-9.98,10.02"
style="fill:none;stroke:#000000;stroke-width:1px;d:path('M10,10l-9.98,10.02')"/>
</svg>
</div>
顺便说一句，path()函数表示法的使用仍然是一个开放的问题。因此，这种做法目前可能奏效，但不会持续很长时间。整个技术看起来像是我不建议使用的东西。
增编: SVG规范的急剧变化使变得更加复杂，直到我才读到它。SVG1.1有关于CSS级联的这：
因此，表示属性将参与CSS2级联，就好像它们被相应的CSS样式规则所取代一样，将置于作者样式表的起始中，其特异性为零。
相反，SVG 2说这
表示属性有助于级联的作者级别，遵循所有其他作者级别的样式表，并且具有特异性0。
第一还是最后？到目前为止，我还没有遇到任何浏览器，其中表示属性取代了作者样式表规则。其中包括这个例子。按照SVG 2规则，样式表规则应该被属性所取代，但显然并非如此。
https://stackoverflow.com/questions/46758871
复制相似问题
腾讯云开发者
