Geek Answers Handbook

Is it possible to set fill and stroke colors and opacity in a VML path using CSS?

For example, I would like to do something like the following:

.myRedPath {
    fillcolor: red;
}

...

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

to fill my tracks in red. Is this possible with the color and opacity of the fill and stroke attributes for VML elements? If so, how?

+5
source share
3 answers

As mentioned in other answers, you can use DHMTL behavior to apply any style specified in your stylesheet to your VML element, as the behavior from IE5 to IE9 is supported.

Start by creating an HTC file, for example: 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>

Then apply it to your VML elements. For your specific example, you will use:

<style>
    v\:path
    {
        behavior: url(vmlcss.htc);
    }
</style>

, , :

.myRedPath
{
    fillcolor: red;
    strokecolor: yellow;
}

, VML.

​​ , VML SVG ( ) CSS. SVG ​​ VML , SVG VML.

+3

IE7 :

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

IE8 + Standard, .

+2

VML uses attributes instead of CSS properties, so the only way to refer to them in a stylesheet is to add another behavior URL that references htc that sets the value attribute . Otherwise, use the HTML element to wrap the VML element and add a background color to it:

<!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>
+1
source

More articles:


All Articles