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

以上不适用于IE8，其中Raphael会注入vml形状元素。我可以指定标准的CSS属性，例如background-color，而shape元素可以使样式更好，但我想知道如何应用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元素上设置属性，因此没有这样做的方法。

Answer 2

根据my answer到Is it possible to set fill and stroke colors and opacity on VML paths using CSS?，您应该能够使用DHTML behaviour文件阅读样式表中应用的SVG styles并将其映射到相应的{ {3}}

首先创建行为文件，例如：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>

然后将此块添加到您的页面，以便将此新行为应用于VML元素：

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

这就是全部。现在，在运行IE＆lt; 9时，CSS中指定的笔触颜色和填充颜色应该应用于VML元素。您可以根据需要进一步扩展行为文件以将其他SVG样式映射到VML属性。

在我看来，Raphael应该可以为创建的形状指定标识符或类名，使CSS的样式更容易。

注意：我无法测试此代码，如果有问题请与我们联系，以便我们改进答案。

设计由Raphael从外部样式表创建的VML元素

2 个答案: