我正在使用 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 中指定它们。
最佳答案
没有办法做到这一点,因为 IE8 需要在 VML 元素上设置属性。
关于css - 对 Raphael 从外部样式表创建的 VML 元素进行样式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21906443/