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>
I did notice the browsers turns the href attribute to xlink:href
but image[xlink:href*='temp']
doesn't work either.
How can I make this work?
Edit: 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"
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;
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.