यह VML रास्तों सीएसएस के प्रयोग पर भरण और स्ट्रोक रंग और पारदर्शिता सेट करना संभव है?

उदाहरण के लिए, मैं निम्नलिखित की तरह कुछ करने के लिए करना चाहते हैं:यह VML रास्तों सीएसएस के प्रयोग पर भरण और स्ट्रोक रंग और पारदर्शिता सेट करना संभव है?

.myRedPath { 
    fillcolor: red; 
} 

... 

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

एक लाल रंग के साथ अपने पथ को भरने के लिए। क्या यह वीएमएल तत्वों के लिए भरने और स्ट्रोक विशेषताओं के रंग और अस्पष्टता के साथ संभव है? यदि हां, तो कैसे?

स्रोत

2011-12-28 Josh Knauer

VML का प्रयोग क्यों जब आप कैनवास उपयोग कर सकते हैं? –

शायद पीछे की संगतता के लिए। हालांकि मैं इसके बजाय राफेल का उपयोग करने का सुझाव दूंगा क्योंकि यह ब्राउज़र असंगतताओं को दूर करता है। – Hyangelo

हाँ, दुर्भाग्य से मैं IE के पुराने संस्करणों का समर्थन करने के लिए है। राफेल महान है, लेकिन चीजों को यह कमी रह गई है कि में से एक है कि आप केवल शैली आकार स्पष्ट रूप से कर सकते हैं, सीएसएस के माध्यम से नहीं। मुझे लगता है कि इस सवाल का जवाब है "नहीं, आप ऐसा नहीं कर सकते", लेकिन मुझे आशा है कि मुझे कुछ याद आ रहा है :) –

वीएमएल सीएसएस गुणों के बजाय विशेषताओं का उपयोग करता है, इसलिए स्टाइल शीट में उन्हें संदर्भित करने का एकमात्र तरीका एक और व्यवहार यूआरएल जोड़ना है जो एक एचटीसी संदर्भित करता है जो sets attribute values है। अन्यथा, VML तत्व लपेट और इसे करने के लिए पृष्ठभूमि रंग जोड़ने के लिए एक HTML तत्व का उपयोग करें:

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

कोड पॉल के लिए धन्यवाद :) दुर्भाग्य से, मुझे नहीं लगता मेरे लिये कार्य करता है। मुझे और अधिक विशिष्ट होना चाहिए था, मुझे पथ या बहुभुज जैसे मनमाने ढंग से आकार की शैली की आवश्यकता है। क्या यह तकनीक उन्हें विस्तारित करना संभव है? –

वीएमएल सीएसएस गुणों के बजाय विशेषताओं का उपयोग करता है, इसलिए स्टाइल शीट में उन्हें संदर्भित करने का एकमात्र तरीका एक और व्यवहार यूआरएल जोड़ना है जो एचटीसी का संदर्भ देता है [सेट गुण मान] (http://msdn.microsoft.com/en-us /library/bb263839%28VS.85%29.aspx) –

@PaulSweatte - अच्छा है, आपको इसे एक उत्तर के रूप में संलग्न करना चाहिए। –

IE7 में, आपको निम्न कर सकते हैं:

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

लेकिन यह IE8 + मानक में काम नहीं करता मोड, तो वास्तव में इतना उपयोगी नहीं है।

स्रोत

2013-01-03 20:29:48 user1946745

जैसा कि अन्य उत्तरों में बताया गया है, आप अपने वीएमएल तत्व में अपनी स्टाइल शीट में निर्दिष्ट किसी भी शैली को लागू करने के लिए DHMTL behaviors का उपयोग कर सकते हैं क्योंकि व्यवहार IE5 से IE9 तक समर्थित हैं। 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 styles के लिए समर्थन तो इसी VML विशेषताओं के लिए प्रत्येक एसवीजी शैली मैप करके इस तरह के एक व्यवहार फ़ाइल का उपयोग VML वस्तुओं के लिए जोड़ा जा सकता है।

स्रोत

2014-09-18 09:15:58

यह VML रास्तों सीएसएस के प्रयोग पर भरण और स्ट्रोक रंग और पारदर्शिता सेट करना संभव है?

उत्तर

संबंधित मुद्दे