css - 对 Raphael 从外部样式表创建的 VML 元素进行样式化

Question

我正在使用 Raphael.js 构建图表，这些图表附加了各种样式，包括不同的悬停样式。以下内容适用于各种浏览器:

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

为了将外观与功能完全分离，我尝试使用 CSS 定位我的 Raphael 元素并从那里添加所有样式。

我使用了概述的技术 here能够使用唯一的 ID 在所有浏览器中定位我的形状:

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

以上不适用于 IE8，Raphael 改为注入(inject) vml 形状元素。我可以指定标准的 CSS 属性，例如 background-color，形状元素的样式会很好，但我想知道如何应用 fill-opacity< 等属性、stroke-width 等。

Is it possible to set fill and stroke colors and opacity on VML paths using CSS?解释 behavior: url(#default#VML) 的作用。我可以看到 Raphael 已经为它创建的所有形状元素添加了一个 .rvml 类，并应用了这个行为属性，但它似乎并没有在我停止通过 JS 应用属性后立即生效并开始在 CSS 中指定它们。

Answer 1

没有办法做到这一点，因为 IE8 需要在 VML 元素上设置属性。