CSS 使用属性选择器选择 SVG <use>


HTML5 中,已知的 foreign elements("外语元素,比如SVG和math命名空间中的元素")将被自动加上命名空间。这意味着即使文档中没有任何xmlns属性,HTML元素也将表现的如同他们在XHTML命名空间内 (http://www.w3.org/1999/xhtml)一样,而 元素则将被加上对应的命名空间 (http://www.w3.org/2000/svghttp://www.w3.org/1998/Math/MathML).

在 XML中,除非前缀直接定义在了一个属性上(例如:xlink:href),这个属性就不会有命名空间。换句话说,属性将不会继承其所在元素的命名空间,为了符合这个行为,CSS中的默认命名空间不会加到属性选择器中

@namespace xlink 'http://www.w3.org/1999/xlink';
use[xlink|href^="#icon"] {
fill: currentColor;
}