2012-06-20 16 views
5

Estoy tratando de crear una máscara de recorte en VML que correspondería a clip-path en SVG? ¿Es eso posible?máscara de recorte vml

Sobre la base de numerosas, pero bastante limitado, ejemplos que he intentado dibujar la forma:

<vml:group style="WIDTH: 1px; HEIGHT: 1px" class=vml-element coordsize = "1,1"> 
    <vml:shape style="WIDTH: 1px; HEIGHT: 1px" id=vectorObject2 class=vml-element _fill-color="red" _fill-opacity="1" _stroke-color="black" _stroke-opacity="1" _stroke-width="1" coordsize = "1,1" filled = "t" fillcolor = "red" stroked = "t" strokecolor = "black" strokeweight = ".75pt" path = "m0,0 l100,0,0,100 xe"> 
     <vml:fill class=vml-element opacity = "1"></vml:fill> 
     <vml:stroke class=vml-element opacity = "1"></vml:stroke> 
    </vml:shape> 
</vml:group> 

y luego enmascararlo usando vmlframe:

<vml:vmlframe class=vml-element clip = "t" size = "15pt,37.5pt" src = "#vectorObject2"> </vml:vmlframe> 

Dibujo de obras (triángulo) forma como era de esperar, pero no puedo encontrar la forma de enmascararlo usando vmlframe. ¿Es esa la manera correcta de lograr el enmascaramiento?

Ignore todos los atributos personalizados extraños, ya que la mayoría del código VML se generó a través de una biblioteca de terceros.

¡Gracias de antemano!

+0

En teoría, debería ser posible recortar imágenes ráster de acuerdo con [este documento W3C] (http://www.w3.org/Submission/1998/08/vmlreq): * "Las plantillas y el enmascaramiento se acomodan al permitir una la operación de relleno debe especificarse como un mapa de bits (que, por lo tanto, puede recortarse en la ruta de llenado). Es posible extender el VML para acomodar el recorte de un dibujo arbitrario especificando ese dibujo como el relleno que se va a recortar en la ruta de la forma ". * Es una pena que no haya ejemplos en ninguna parte. – user568458

Respuesta

2

Utilice CSS clip property para emular clip-path como se demostró en Dojo GFX library o algo así como jsgraphics.

+0

Este es realmente el punto. 'Dojo' implementó la máscara de recorte rectangular, sin embargo, necesito una personalizada (por ejemplo, ruta/curva) –

+0

La biblioteca [jsgraphics] (http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm) permite rellenos de explorador cruzado y trazos de elipses y líneas respectivamente. Es posible combinar esto con un posicionamiento absoluto y un color que coincida con el color de fondo para simular una máscara de recorte. –

+0

Ok, parece que será lo más cerca que pueda llegar. Bounty va a ti @Paul! Gracias :) –