Search code examples
maskingvml

vml clipping mask

I am trying to create a clipping mask in VML that would correspond to clip-path in SVG? Is that possible?

Based on numerous, but fairly limited, examples I have tried drawing the shape:

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

and then masking it using vmlframe:

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

Drawing of shape (triangle) works as expected but I cannot find I way to mask it using vmlframe. Is that the right way to achieve masking?

Please ignore all bunch of weird custom attributes as majority of VML code was generated via 3rd party library.

Thanks in advance!

Solution

  • Use the CSS clip property to emulate clip-path as demonstrated in the Dojo GFX library or something like jsgraphics.