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

Question

When using a CSS reset like

* {
  all: unset;
}

inline SVG graphics are not shown correctly, see https://jsfiddle.net/593qysxp/1/

I have tested this with Safari 11 and Chrome 61.

I tried to solve this with setting the svg element to display: block or all: initial but this did not help.

Does anyone has a solution?

Answer 1

SVG 2 now defines a number of attributes as presentation attributes that were true XML attributes in SVG 1.1. Among them are cx, cy, rx, ry for <ellipse> elements and the d attribute for <path> elements.

That has the consequence that these, when written as attributes on the element, are treated as CSS properties. That is why they are overwritten by all: unset . (according to SVG 1.1 rules, see Addendum below.)

That means equally that they can be stated in a style attribute, where they would have a higher specicifity than any stylesheet.

As not all browser implement these presentation attributes yet, you would have to state them for now double as attributes and style properties. The result looks weird, if you ask me:

 * { 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> 

The use of the path() functional notation is, by the way, still an open issue . So this may currently work, but not for long. This whole technique looks like something that I would not advise to use.

Addendum: Things get further complicated by a breaking change in the SVG spec I wasn't aware of until I just read up on it. SVG 1.1 has this to say about the CSS cascade:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero.

SVG 2 instead says this :

Presentation attributes contribute to the author level of the cascade, following all other author-level style sheets, and have specificity 0.

First or last? So far I have not encountered any browser where presentation attributes supplant author style sheet rules. That includes this example. Following SVG 2 rules, your stylesheet rule should have been replaced by the attributes, but obviously weren't.

Answer 2

If you want to leave SVG content completely alone and not reset anything inside them, you could use

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

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