Например, я хотел бы сделать что-то вроде следующего:
.myRedPath {
fillcolor: red;
}
...
<v:path class="myRedPath" v="..."/>
Чтобы заполнить мои пути красным цветом. Возможно ли это с помощью цвета и непрозрачности атрибутов заливки и обводки для элементов VML? Если да, то как?
Как упоминалось в других ответах, вы можете использовать поведение DHMTL, чтобы применить любой стиль, указанный в вашей таблице стилей, к вашему элементу VML, поскольку поведение поддерживается от IE5 до IE9.
Начните с создания файла HTC, например: vmlcss.htc:
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="onpropertychange()" />
<PUBLIC:METHOD NAME="refresh" />
<SCRIPT LANGUAGE="JScript">
function onpropertychange()
{
if (event.propertyName == "className")
{
refresh();
}
}
function refresh()
{
// Set any VML attribute you may define in your stylesheet
element.fillcolor = element.currentStyle["fillcolor"];
element.strokecolor = element.currentStyle["strokecolor"];
// etc.
}
refresh();
</SCRIPT>
</PUBLIC:COMPONENT>
Затем примените его к своим элементам VML. Для вашего конкретного примера вы должны использовать:
<style>
v\:path
{
behavior: url(vmlcss.htc);
}
</style>
Наконец, укажите стили, как показано в вашем примере:
.myRedPath
{
fillcolor: red;
strokecolor: yellow;
}
Вы можете изменить файл поведения, чтобы добавить поддержку все атрибуты VML.
Можно использовать такой метод для написания библиотеки, которая рисует фигуры с использованием VML или SVG (в зависимости от поддержки браузера) и позволяет стилизовать их с помощью CSS. Поддержка стилей SVG может быть добавлена к объектам VML с помощью такого файла поведения. путем сопоставления каждого стиля SVG с соответствующими атрибутами VML.
В IE7 вы можете сделать следующее:
vml\:polyline
{
strokecolor: expression(this.strokecolor = "red");
fillcolor: expression(this.fillcolor = "green");
}
Но он не работает в стандартном режиме IE8+, поэтому не очень полезен.
VML использует атрибуты вместо свойств CSS, поэтому единственный способ сослаться на них в таблице стилей — добавить другой URL-адрес поведения, который ссылается на htc, который устанавливает значения атрибутов. В противном случае используйте элемент HTML, чтобы обернуть элемент VML и добавить к нему цвет фона:
<!doctype html>
<html xmlns:v xmlns:svg='http://www.w3.org/2000/svg'>
<head>
<meta charset="UTF-8">
<title>Lightbox Simple</title>
<style type="text/css">
/* Hide scrollbars */
/*html, body { overflow: hidden; }*/
/*modal input*/
.trigger { display:inline-block; }
/* Hide modal transparency */
.dialog, .film { position:absolute; left:-7777px; z-index:2; }
/* modal output */
a.trigger:hover .dialog { display: block; left:50%; top:50%; width:500px; border: 1px solid #fff; }
a.trigger:hover .film { left: -3333px; top:-3333px; width:7777px; height:7777px; opacity: .7; background-color: #000; z-index: 3;}
/* modal content */
.visible { display: inline-block; background-color: #999; position:absolute; width: 200px; z-index: 4;}
/* modal off switch */
.closer { z-index:4; position:absolute; top:0; right:20px; display:block; background-color: #fff; color: #fff; width:0; }
.placeholder { position:absolute; top:0; left:0; }
@media,
{
v\:rect,v\:fill { behavior:url(#default#VML);}
.vml_bg
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
a.trigger:hover .film { width: 0; }
.vml_wrap {
position:absolute;
left:0;
top:0;
width:0;
height:0;
display:inline-block;
}
a.trigger:hover { visibility: visible; }
a.trigger:hover .vml_wrap{ width:7777px; height:7777px; }
}
</style>
</head>
<body>
<p>hey</p>
<span class="closer">X</span>
<a href="#" class="trigger">
you
<span class="vml_wrap"><v:rect fillcolor="black" class="vml_bg"><v:fill opacity="0.5" /></v:rect></span>
<span class="dialog">
<span class="visible">hi</span>
<span class="film">
</span>
</span>
</a>
</body>
</html>
