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

时间:2017-10-15 19:03:10

标签: html css svg

使用CSS重置时

* {
  all: unset;
}

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

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

我尝试通过将svg元素设置为display: blockall: initial来解决此问题,但这没有帮助。

有没有人有解决方案?

2 个答案:

答案 0 :(得分:3)

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()功能表示法仍然是开放的issue。所以这可能目前有效,但不会持续很长时间。这整个技术看起来像是我不建议使用的东西。

附录:在我刚读完之前,SVG规范发生了重大变化,事情变得更加复杂。关于CSS级联的SVG 1.1有this

  

因此,表示属性将参与CSS2级联,就好像它们被作者样式表中位于作者样式表的特定CSS样式规则所取代一样。

SVG 2改为this

  

演示文稿属性有助于级联的作者级别,遵循所有其他作者级别样式表,并且具有特异性0。

第一个还是最后一个?到目前为止,我还没有遇到任何浏览器,其中表示属性取代了作者样式表规则。这包括这个例子。遵循SVG 2规则,您的样式表规则应该已被属性替换,但显然不是。

答案 1 :(得分:3)

如果您想完全保留SVG内容而不重置其中的任何内容,可以使用

@namespace svg "http://www.w3.org/2000/svg";

:not(svg|*) {
  all: unset;
}