Стилизация элементов VML, созданных Raphael из внешней таблицы стилей

Я строю диаграммы с помощью Raphael.js, к которым привязаны всевозможные стили, включая различные стили при наведении курсора. В браузерах работает следующее:

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

Пытаясь полностью отделить внешний вид от функциональности, я пытаюсь нацелить свои элементы Raphael с помощью CSS и добавить оттуда все стили.

Я использовал метод, описанный здесь, чтобы иметь возможность настроить таргетинг на мои фигуры во всех браузерах, используя уникальные идентификаторы:

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, и элемент формы получит стиль, но я хотел бы знать, как применять такие атрибуты, как fill-opacity, stroke-width и им подобные.

Можно ли с помощью CSS задать цвета и прозрачность заливки и обводки для путей VML? объясняет роль behavior: url(#default#VML). Я вижу, что Raphael уже добавляет класс .rvml ко всем элементам формы, которые он создает, и применяет это свойство поведения, но, похоже, оно не вступает в силу, как только я перестаю применять атрибуты через JS и начинаю указывать их в CSS.


svg css raphael internet-explorer-8 vml
person Elise    schedule 20.02.2014    source источник
comment
Привет, Элиза, пожалуйста, проверьте мой ответ здесь: stackoverflow.com/a/25908706/1010492   -  person Gyum Fox    schedule 18.09.2014

Ответы (2)


arrow_upward
0
arrow_downward

Это невозможно сделать, поскольку IE8 требует установки атрибутов элементов VML.

person TheCloudlessSky    schedule 03.04.2014

arrow_upward
0
arrow_downward

На основе мого ответа на является Можно ли установить цвета заливки и обводки, а также прозрачность путей VML с помощью CSS?, вы должны иметь возможность использовать поведение DHTML для чтения стили SVG, примененные в вашей таблице стилей, и сопоставьте их с соответствующими Атрибуты VML.

Начните с создания файла поведения, например: 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>

Это все. Цвет обводки и цвет заливки, указанные в вашем CSS, теперь должны применяться к элементам VML при запуске IE‹9. Вы можете дополнительно расширить файл поведения, чтобы сопоставить другие стили SVG с атрибутами VML по мере необходимости.

На мой взгляд, Raphael должен предлагать возможность указывать либо идентификаторы, либо имена классов для созданных фигур, что значительно упрощает стилизацию с помощью CSS.

Примечание. Мне не удалось протестировать этот код. Сообщите мне, если с ним возникнут проблемы, чтобы мы могли улучшить ответ.

person Gyum Fox    schedule 19.09.2014