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

例如，我想這樣做如下：是否可以在使用CSS的VML路徑上設置填充和筆觸顏色和不透明度？

.myRedPath { 
    fillcolor: red; 
} 

... 

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

來填充紅色我的路徑。 VML元素的填充和描邊屬性的顏色和不透明度可能嗎？如果是這樣，怎麼樣？

來源

2011-12-28 Josh Knauer

爲什麼使用VML時，你可以用帆布？ – 2011-12-29 02:53:50

可能是爲了向後兼容。儘管我會建議使用Raphael，因爲它會將瀏覽器的不兼容性抽象出來。 – Hyangelo 2012-01-05 16:23:21

是的，不幸的是我必須支持IE的舊版本。拉斐爾是偉大的，但它似乎缺少的一件事是，你只能明確的風格形狀，而不是通過CSS。我假設這個問題的答案的問題是「不，你不能這樣做」，但我希望我只是失去了一些東西:) – 2012-01-05 17:13:21

VML使用屬性而不是CSS屬性，因此在樣式表中引用它們的唯一方法是添加另一個引用htc的行爲URL，其中的sets attribute values。否則，使用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>

來源

2012-01-20 03:07:58

感謝您的代碼保羅:)不幸的是，我不認爲這爲我工作。我應該更具體一些，我需要設計任意形狀，如路徑或多邊形。有可能將這種技術擴展到他們嗎？ – 2012-02-01 16:35:10

VML使用屬性而不是CSS屬性，所以引用它們在樣式表中的唯一辦法是增加它引用一HTC其中[集屬性值]（http://msdn.microsoft.com/en-us另一個行爲URL /library/bb263839%28VS.85%29.aspx） – 2012-02-04 01:32:28

@PaulSweatte - 漂亮的一個，你要重視這個作爲一個答案。 – 2012-04-07 19:00:12

在IE7中，你可以做以下操作：

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

但它不能在IE8 +標準的制定工作模式，所以沒那麼有用。

來源

2013-01-03 20:29:48 user1946745

正如其他答案中提到的那樣，您可以使用DHMTL behaviors將樣式表中指定的任何樣式應用於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; 
}

您可能要修改的行爲文件以添加all VML attributes支持。

人們可以使用這樣的技術來存儲，吸引用VML或SVG（取決於瀏覽器支持）的形狀，並且允許通過造型CSS的庫。爲SVG styles支撐然後可以通過每個SVG樣式映射到相應的VML屬性被添加到使用這樣的行爲文件中的VML的對象。

來源

2014-09-18 09:15:58

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

回答

相關問題