Question

为什么我不能通过href-attribute选择元素？

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个选择器，您需要在样式表according to the spec的顶部声明xlink命名空间：

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

然后，您可以使用以下属性选择器with a namespace prefix：

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

属性选择器中的属性名称以CSS的形式给出限定名称：先前已声明的名称空间前缀可以添加到由命名空间分隔的属性名称之前分离器＆＃34;垂直条＆＃34; （|）。与命名空间保持一致 XML推荐

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

1 个答案:

Demo Fiddle