通过"all: unset"重置CSS会中断内联SVG

Question

当使用CSS重置时，例如

* {
all: unset;
}

内联 SVG 图形未正确显示，请参阅 https://jsfiddle.net/593qysxp/1/

我已经用Safari 11和Chrome 61对此进行了测试。

我试图通过将 svg 元素设置为display: block或all: initial来解决此问题，但这没有帮助。

有人有解决方案吗？

Answer 1

如果你想让SVG内容完全独立，而不重置其中的任何内容，你可以使用

@namespace svg "http://www.w3.org/2000/svg";
:not(svg|*) {
all: unset;
}

Answer 2

SVG 2 现在将许多属性定义为表示属性，这些属性在 SVG 1.1 中是真正的 XML 属性。其中包括用于<ellipse>元素的cx，cy，rx，ry和用于<path>元素的d属性。

这样做的结果是，当这些属性作为元素上的属性编写时，被视为CSS属性。这就是为什么它们被all: unset覆盖的原因.(根据 SVG 1.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 规范的重大更改，事情变得更加复杂，直到我刚刚阅读它才意识到。SVG 1.1 对 CSS 级联有这样的说法：

因此，表示属性将参与 CSS2 级联，就好像它们被放置在作者样式表开头的相应 CSS 样式规则所取代，其特异性为零。

SVG 2 反而这样说：

表示属性在所有其他作者级别样式表之后，对级联的作者级别有贡献，并且具有特异性 0。

第一个还是最后一个？到目前为止，我还没有遇到任何演示文稿属性取代作者样式表规则的浏览器。这包括此示例。按照 SVG 2 规则，您的样式表规则应该被属性替换，但显然不是。