title: Styling VML elements created by Raphael from an external stylesheet
body: <p>I am building charts with Raphael.js that have all sorts of styling attached to them, including different hover styling. The following works across browsers:</p>
  
  <pre><code>var bar = paper.rect(x, y, width, height)
                 .attr({"stroke-width": 0, fill: #baeadd; "fill-opacity": 0.3})
  </code></pre>
  
  <p>In an attempt to fully separate the appearance from the functionality, I am trying to target my Raphael elements with CSS and add all the styling from there.</p>
  
  <p>I used the technique outlined <a href="http://forumone.com/blogs/post/cross-browser-styling-raphaeljs-elements-css" rel="nofollow noreferrer">here</a> to be able to target my shapes in all browsers, using unique ID-s:</p>
  
  <pre><code>bar.node.id = "bar-" + id;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>*[id^="bar"] {
    // Attributes listed here seem to work in modern browsers
    // http://raphaeljs.com/reference.html#Element.attr
    fill: #baeadd;
    fill-opacity: 0.3;
  }
  
  *[id^="bar"]:hover {
    fill-opacity: 0.5;
  }
  </code></pre>
  
  <p>The above does not work on IE8,  where Raphael injects vml shape elements instead. I am able to specify standard CSS properties such as <code>background-color</code>, and the shape element will get the styling fine, but I would like to know how to apply attributes such as <code>fill-opacity</code>, <code>stroke-width</code>, and the likes.</p>
  
  <p><a href="https://stackoverflow.com/questions/8661154/is-it-possible-to-set-fill-and-stroke-colors-and-opacity-on-vml-paths-using-css">Is it possible to set fill and stroke colors and opacity on VML paths using CSS?</a> explains the role of <code>behavior: url(#default#VML)</code>. I can see that Raphael already adds a <code>.rvml</code> class to all the shape elements it creates, and applies this behavior property, but it doesn't seem to take effect as soon as I stop applying attributes via JS and start specifying them in the CSS.</p>