css - 如何对具有命名空间属性 href 的 SVG 元素使用 CSS 属性选择器？

Question

为什么我不能通过 href 属性选择元素？

CSS

/* Works */
svg image[type=overlay]{
    outline: 3px solid blue;
}

/* Doesn't work */
svg image[href*='temp']{
    outline: 5px solid red;
}

/* Doesn't work either */
svg image[href='wcs/WFL/position/temp2.png']{
    outline: 5px solid red;
}

SVG

<image display="inline" type="overlay" width="148" height="90" x="920" y="918" transform="" href="wcs/WFL/position/temp2.png"><title>B02003
Temp: 2</title></image>

我确实注意到浏览器将 href 属性变为 xlink:href 但 image[xlink:href*='temp'] 也不起作用。

我怎样才能让它工作？

编辑:SVG 使用以下命名空间，我认为这会导致问题，但我不知道如何解决它。

xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"

Fiddle

Answer 1

Demo Fiddle

首先，为了使用xlink 选择器，您需要在样式表顶部声明xlink 命名空间according to the spec :

@namespace xlink 'http://www.w3.org/1999/xlink';

然后，你可以使用下面的属性选择器with a namespace prefix :

svg image[xlink|href*="temp"] {
    outline: 3px solid red;
}

The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator "vertical bar" (|). In keeping with the Namespaces in the XML recommendation