CSS 规则不适用于 SVG 元素答案

【问题标题】：CSS rule not for SVG elementsCSS 规则不适用于 SVG 元素
【发布时间】：2022-01-22 04:30:39
【问题描述】：

从没想过我会问一些关于 CSS 的问题，但它就是在这里。当你开发一个小部件时，你不能依赖特定网站的样式表，所以你想要这样的东西：

.xxx-widget * {
  all:revert;
}

但如果你的小部件有 SVG 图标：

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

恢复所有删除也和 d 属性从 svg 和图标消失。然后我尝试修改还原选择器：

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

上面的 sn-p 不起作用，同时浏览器不认为它是不正确的，并且很多样式都被破坏了。除了 svg 之外，还有什么方法可以为所有内容编写选择器吗？

【问题讨论】：

当然.xxx-widget *:not(svg) 不起作用：svg 中的d 元素是您的小部件的后代，并且它没有标签名称@ 987654329@ - 所以这个选择器适用于它。
另见stackoverflow.com/questions/69696234/…

标签： css svg

【解决方案1】：

有趣的问题。首先，影响 SVG d 属性的 CSS（当前）发生在基于 Chromium 的浏览器中。 Firefox 尚未跟进。（但对于大多数其他 SVG 属性，它认为 CSS 重置会影响它们。）

我会尝试调用 CSS @namespace 的神秘知识：

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

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

<body>

<p>
 This text should be black (or in default UA colour);<br>
 following circle should be orange:
</p>

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

因为历史上 HTML 和 SVG 仍然拥有不同的命名空间，您仍然可以利用它来发挥自己的优势。

更多示例：

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

【讨论】：

我们正在为 Firefox 97 中的 SVG 提供 CSS d，所以我们快到了。
@RobertLongson “几乎”就像“接近”或“几乎” :) 很高兴知道！这里：english.stackexchange.com/questions/388998/…
Firefox 97 计划于 2022 年 2 月 8 日发布 [1]，它确实应该提供 d 属性并将 SVG 路径 d 属性作为表示属性 [2]。 [1]wiki.mozilla.org/Release_Management/Calendar/fx-trains.herokuapp.com/release/?version=97[2]bugzilla.mozilla.org/show_bug.cgi?id=1744599
@myf 也许为not 添加一个示例，这很容易从您的答案<style> @namespace only_svg "http://www.w3.org/2000/svg"; *:not(only_svg|* ) { all: revert !important; } </style> 得到

【解决方案2】：

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

【讨论】：

注意：这是来自stackoverflow.com/a/70424117/125981 的派生示例，我从中借用了信息，因此我赞成
好吧，虽然这可能更具可读性/可理解性，但我喜欢将隐式命名空间设置为 HTML，然后更好地使用纯 *，因为我认为它更接近 OP 的意图。从技术上讲是的，:not(svg_namespace|*) 正是这样做的，所以它实际上甚至可以匹配来自 MathML 的元素，这肯定是一个超级小众的东西，但我觉得它会以类似的方式影响 SVG 与未命名空间的 * 是为了操作。