Элементы стиля VML, созданные Рафаэлем из внешней таблицы стилей

Question

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

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

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

я использовал технику, описанную 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, где Рафаэль вводит элементы формы 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.

Answer 2

основе my answer к Is it possible to set fill and stroke colors and opacity on VML paths using CSS?, вы должны быть в состоянии использовать DHTML behaviour файл для чтения SVG styles применяется в таблице стилей и сопоставить их с соответствующим VML attributes.

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

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

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