CSS rule not for SVG elements-CodePudding

Never thought I will ask something about CSS but here it is. When you develop a widget you can't rely on particular website's stylesheet so you want something like this:

.xxx-widget * {
  all:revert;
}

But in case your widget has SVG icons:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 19 16"><path fill-rule="evenodd" d="M.009 16l18.658-8L.009 0 0 6.222 13.333 8 0 9.778z"></path></svg>

reverting all removes also and d property from svg and icon disappears. Then I tried to modify reverting selector:

.xxx-widget *:not(svg) {
  all:revert;
}

Above snippet does not work and at the same time browser does not recognize it as incorrect and a lot of styles are getting broke. Is there any approach to compose selector for everything except svg?

CodePudding user response：

Interesting question. First off, CSS affecting SVG d attributes (currently) happens in Chromium based browsers. Firefox is yet to follow. (But for most of rest SVG properties it holds that CSS reset affects them.)

I'd try invoking arcane knowledge of CSS @namespace:

<style>
/* "page" styles */
p { color: red; border: solid; }
circle { fill: orange; }
</style>

<style>
/* "your" styles not affecting SVG */
@namespace "http://www.w3.org/1999/xhtml";
* {
 all: revert !important;
}
</style>

<body>

<p>
 This text should be black (or in default UA colour),
circle should be orange.
</p>

<svg width="100" viewBox="-4 -4 8 8"
 xmlns="http://www.w3.org/2000/svg" >
 <circle r="4"></circle>
</svg>

Because historically HTML and SVG still possess different namespaces, you can still use it for your advantage.

More examples:

<style>
* { /* implicit namespace is not set, so affects both HTML and SVG */ }
</style>

<style>
@namespace "http://www.w3.org/1999/xhtml";
@namespace only_html "http://www.w3.org/1999/xhtml";
@namespace only_svg "http://www.w3.org/2000/svg";
* {
 /* implicit namespace is set to html, so affects only HTML, not SVG */
}
*|* {
 /* affects elements from any namespace */
}
only_html|* {
 /* affects only HTML elements due explicit namespace */
}
only_svg|* {
 /* affects only SVG elements due explicit namespace */
}
</style>

CodePudding user response：

<head>
<style>
/* "page" styles */
p { color: red; border: solid; }
svg circle { fill: orange; }
</style>

<style>
 @namespace only_svg "http://www.w3.org/2000/svg";
*:not(only_svg|* )  {
 all: revert !important;
}
</style>
</head>
<body>
<p>
 This text should be black (or in default UA colour),
circle should be orange.
</p>
<svg width="100" viewBox="-4 -4 8 8"
 xmlns="http://www.w3.org/2000/svg" >
 <circle r="4"></circle>
</svg>
</body>