title: How to use CSS attribute selector for an SVG element with namespaced attribute href?
body: <p>Why can't I select elements by their href-attribute?</p>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p><strong>SVG</strong></p>
  
  <pre><code>&lt;image display="inline" type="overlay" width="148" height="90" x="920" y="918" transform="" href="wcs/WFL/position/temp2.png"&gt;&lt;title&gt;B02003
  Temp: 2&lt;/title&gt;&lt;/image&gt;
  </code></pre>
  
  <p>I did notice the browsers turns the href attribute to <code>xlink:href</code> but <code>image[xlink:href*='temp']</code> doesn't work either.</p>
  
  <p>How can I make this work?</p>
  
  <p><strong>Edit:</strong>
  The SVG uses the following namespaces, I think this causes the problem but I don't know how to get around it.</p>
  
  <pre><code>xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:svg="http://www.w3.org/2000/svg"
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/tw5z4Lu8/1/">Fiddle</a></strong></p>