是否可以使用CSS在VML路徑上設置填充和描邊顏色以及不透明度？

Question

例如，我想做以下事情：

.myRedPath {
    fillcolor: red;
}

...

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

用紅色填充我的路徑。 VML元素的填充和描邊屬性的顏色和不透明度是否可行？ 如果是這樣，怎么辦？

Answer 1

如其他答案中所述，您可以使用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對象。

Answer 2

在IE7中，您可以執行以下操作：

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

但是它在IE8 +標准模式下不起作用，因此並不是很有用。

Answer 3

VML使用屬性而不是CSS屬性，因此在樣式表中引用它們的唯一方法是添加另一個行為URL，該行為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>

是否可以使用CSS在VML路徑上設置填充和描邊顏色以及不透明度？

問題描述

3 個解決方案

解決方案1
3 2014-09-18 09:15:58

解決方案2
2 2013-01-03 20:29:48

解決方案3
1 2012-01-20 03:07:58

是否可以使用CSS在VML路徑上設置填充和描邊顏色以及不透明度？

問題描述

3 個解決方案

解決方案1 3 2014-09-18 09:15:58

解決方案2 2 2013-01-03 20:29:48

解決方案3 1 2012-01-20 03:07:58

解決方案1
3 2014-09-18 09:15:58

解決方案2
2 2013-01-03 20:29:48

解決方案3
1 2012-01-20 03:07:58