CSS 规则不适用于 SVG 元素
Posted
技术标签:
【中文标题】CSS 规则不适用于 SVG 元素【英文标题】：CSS rule not for SVG elements 【发布时间】：2022-01-22 04:30:39 【问题描述】：从没想过我会问一些关于 CSS 的问题，但它就是在这里。当你开发一个小部件时，你不能依赖特定网站的样式表，所以你想要这样的东西：
.xxx-widget *
all:revert;
但如果你的小部件有 SVG 图标：
<svg xmlns="http://www.w3.org/2000/svg" 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@ - 所以这个选择器适用于它。
另见***.com/questions/69696234/…
【参考方案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 viewBox="-4 -4 8 8"
xmlns="http://www.w3.org/2000/svg" >
<circle r="2" stroke-></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 viewBox="-4 -4 8 8"
xmlns="http://www.w3.org/2000/svg" >
<circle r="4"></circle>
</svg>
</body>【讨论】：
注意：这是来自***.com/a/70424117/125981 的派生示例，我从中借用了信息，因此我赞成 好吧，虽然这可能更具可读性/可理解性，但我喜欢将隐式命名空间设置为 HTML，然后更好地使用纯*，因为我认为它更接近 OP 的意图。从技术上讲是的，:not(svg_namespace|*) 正是这样做的，所以它实际上甚至可以匹配来自 MathML 的元素，这肯定是一个超级小众的东西，但我觉得它会以类似的方式影响 SVG 与未命名空间的 * 是为了操作。以上是关于CSS 规则不适用于 SVG 元素的主要内容，如果未能解决你的问题，请参考以下文章