Можно ли установить цвета заливки и обводки и непрозрачность на путях VML с помощью CSS? - PullRequest
Новая
       3

Можно ли установить цвета заливки и обводки и непрозрачность на путях VML с помощью CSS?

5 голосов
/ 29 декабря 2011

Например, я хотел бы сделать что-то вроде следующего: 

.myRedPath {
    fillcolor: red;
}

...

<v:path class="myRedPath" v="..."/>

чтобы заполнить мои пути красным цветом. Возможно ли это с цветом и непрозрачностью атрибутов заливки и обводки для элементов VML? Если да, то как?

Ответы [ 3 ]

3 голосов
/ 18 сентября 2014

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

2 голосов
/ 04 января 2013

В IE7 вы можете сделать следующее: 

vml\:polyline
{
  strokecolor: expression(this.strokecolor = "red");
  fillcolor: expression(this.fillcolor = "green");
}

Но он не работает в режиме стандартов IE8 +, так что не очень полезен.

1 голос
/ 20 января 2012

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>
...