Como usar o seletor de atributos CSS para um elemento SVG com o atributo href no namespace?
Por que não consigo selecionar elementos pelo atributo 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>
Notei que os navegadores transformam o atributo href emxlink:href masimage[xlink:href*='temp'] também não funciona.
Como posso fazer isso funcionar?
Editar: O SVG usa os seguintes namespaces, acho que isso causa o problema, mas não sei como contorná-lo.
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:svg="http://www.w3.org/2000/svg"