¿Es posible establecer colores de relleno y trazo y opacidad en rutas VML usando CSS?

Por ejemplo, me gustaría hacer algo como lo siguiente:¿Es posible establecer colores de relleno y trazo y opacidad en rutas VML usando CSS?

.myRedPath { 
    fillcolor: red; 
} 

... 

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

para llenar mis caminos con un color rojo. ¿Es esto posible con el color y la opacidad de los atributos de relleno y trazo para los elementos VML? ¿Si es así, cómo?

Fuente

2011-12-28 Josh Knauer

¿Por qué usar VML cuando puede usar Canvas? –

Probablemente por compatibilidad con versiones anteriores. Aunque sugeriría usar Raphael en su lugar ya que abstrae las incompatibilidades del navegador. – Hyangelo

Sí, lamentablemente tengo que admitir versiones anteriores de IE. Raphael es genial, pero una de las cosas que parece faltar es que solo se pueden aplicar estilos a formas explícitamente, no a través de CSS. Asumo que la respuesta a estas preguntas es "no, no puedes hacer eso", pero tengo la esperanza de que me falta algo :) –

VML utiliza atributos en lugar de propiedades CSS, por lo que la única forma de hacer referencia a ellos en una hoja de estilo es agregar otro comportamiento URL que haga referencia a un htc que sets attribute values. De lo contrario, utilice un elemento HTML para envolver el elemento VML y añada el color de fondo a la misma:

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

Fuente

2012-01-20 03:07:58

Gracias por el código Paul :) Desafortunadamente, no lo creo funciona para mi. Debería haber sido más específico, necesito diseñar formas arbitrarias como caminos o polígonos. ¿Es posible extender esta técnica a ellos? –

VML utiliza atributos en lugar de propiedades de CSS, por lo que la única manera de hacer referencia a ellos en una hoja de estilo es agregar otro comportamiento URL que hace referencia a un htc que [establece valores de atributo] (http://msdn.microsoft.com/es-es/ /library/bb263839%28VS.85%29.aspx) –

@PaulSweatte - bueno, debe adjuntar esto como una respuesta. –

En Internet Explorer 7, puede hacer lo siguiente:

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

Pero no se ha solucionado en las Normas IE8 + modo, entonces realmente no es tan útil.

Fuente

2013-01-03 20:29:48 user1946745

Como se menciona en otras respuestas, puede usar DHMTL behaviors para aplicar cualquier estilo especificado en su hoja de estilos a su elemento VML, ya que los comportamientos son compatibles de IE5 a IE9.

de inicio mediante la creación de un archivo de HTC, por ejemplo: 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>

luego aplicarlo a sus elementos VML. Para su ejemplo particular, se debería utilizar:

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

Por último, especifique los estilos como se muestra en el ejemplo:

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

es posible que desee modificar el archivo de comportamiento para añadir soporte para all VML attributes.

Se podría utilizar tal técnica para escribir una biblioteca que dibuje formas usando VML o SVG (dependiendo del soporte del navegador) y permite el estilo a través de CSS. La compatibilidad con SVG styles podría agregarse a los objetos VML utilizando dicho archivo de comportamiento asignando cada estilo SVG a los atributos VML correspondientes.

Fuente

2014-09-18 09:15:58

¿Es posible establecer colores de relleno y trazo y opacidad en rutas VML usando CSS?

Respuesta

Cuestiones relacionadas