如何为带有namespaced属性href的SVG元素使用CSS属性选择器? [英] How to use CSS attribute selector for an SVG element with namespaced attribute href?
问题描述
为什么无法根据href属性选择元素?
Why can't I select elements by their 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使用以下命名空间,我不知道如何解决这个问题。
The SVG uses the following namespaces, I think this causes the problem but I don't know how to get around it.
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"
Fiddle
推荐答案
演示小提琴
首先,为了使用 xlink
在样式表顶部声明 xlink
命名空间 根据规范 :
Demo Fiddle
Firstly, in order to use xlink
slectors, you need to to declare the xlink
namespace at the top of your stylesheet according to the spec:
@namespace xlink 'http://www.w3.org/1999/xlink';
然后,您可以使用以下属性选择器 命名空间前缀 :
Then, you can use the following attribute selector with a namespace prefix:
svg image[xlink|href*="temp"] {
outline: 3px solid red;
}
属性选择器中的属性名称as a CSS
限定名称:先前声明的命名空间前缀
可以添加到由命名空间
separatorvertical bar(|)分隔的属性名称。与
XML建议中的命名空间一致
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
这篇关于如何为带有namespaced属性href的SVG元素使用CSS属性选择器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!