Styling VML elements created by Raphael from an external stylesheet

Question

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:

var bar = paper.rect(x, y, width, height)
               .attr({"stroke-width": 0, fill: #baeadd; "fill-opacity": 0.3})

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.

I used the technique outlined here to be able to target my shapes in all browsers, using unique ID-s:

bar.node.id = "bar-" + id;

-

*[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;
}

The above does not work on IE8, where Raphael injects vml shape elements instead. I am able to specify standard CSS properties such as background-color, and the shape element will get the styling fine, but I would like to know how to apply attributes such as fill-opacity, stroke-width, and the likes.

Is it possible to set fill and stroke colors and opacity on VML paths using CSS? explains the role of behavior: url(#default#VML). I can see that Raphael already adds a .rvml 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.

Hi Elise, please check my answer here: http://stackoverflow.com/a/25908706/1010492 — Gyum Fox, Sep 18 '14 at 09:29

score 0 · Answer 1 · answered Apr 03 '14 at 19:01

0

There isn't a way of doing this since IE8 requires setting the attributes on the VML elements.

answered Apr 03 '14 at 19:01

TheCloudlessSky

18,608
15
75
116

score 0 · Answer 2 · edited May 23 '17 at 10:26

Based on my answer to Is it possible to set fill and stroke colors and opacity on VML paths using CSS?, you should be able to use a DHTML behaviour file to read the SVG styles applied in your style sheet and map them to the corresponding VML attributes.

Start by creating the behavior file, eg: vmlcss.htc

<PUBLIC:COMPONENT>
<SCRIPT LANGUAGE="JScript">

var currentStyle = element.currentStyle;
if (currentStyle)
{
    // Apply stroke style
    element.stroked = currentStyle["stroke"] && currentStyle["stroke"] != "none";
    if (element.stroked)
    {
        element.strokecolor = currentStyle["stroke"] || "none";
        element.strokeweight = currentStyle["stroke-width"] || "1px";
    }

    // Apply fill style
    element.filled = currentStyle["fill"] != "none";
    if (element.filled)
    {
        element.fillcolor = currentStyle["fill"] || "Black";
    }
}
</SCRIPT>
</PUBLIC:COMPONENT>

Then add this block to your pages in order to apply this new behavior to the VML elements:

<style>
    .rvml
    {
        behavior: url(#default#VML) url(vmlcss.htc);
    }
</style>

That's all. The stroke color and fill color specified in your CSS should now be applied to the VML elements when running IE<9. You may further extend the behavior file to map other SVG styles to VML attributes as needed.

In my opinion, Raphael should offer the possibility to specify either identifiers or class names for the created shapes, making styling via CSS much easier.

Note: I was not able to test this code, please let me know if there are issues with it so that we can improve the answer.

Styling VML elements created by Raphael from an external stylesheet

2 Answers2