5

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!

ZnArK
  • 1,533
  • 1
  • 12
  • 23
Jovan Perovic
  • 19,846
  • 5
  • 44
  • 85
  • In theory it should be possible to clip raster images according to [this W3C doc](http://www.w3.org/Submission/1998/08/vmlreq): *"Stenciling and masking are accommodated by permitting a fill operation to be specified as a bitmap (which may therefore be clipped to the fill path). It is possible to extend VML to accommodate clipping of arbitrary drawing by specifying that drawing as the fill which is to be clipped to the shape path."* Shame there seem to be no examples anywhere. – user56reinstatemonica8 Jul 04 '13 at 11:58

1 Answers1

2

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

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
  • This is actually the point. `Dojo` implemented the rectangular clipping mask, however, I need custom one (for example path/curve-like) – Jovan Perovic Jun 27 '12 at 05:20
  • The [jsgraphics](http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm) library allows cross-browser fills and strokes of ellipses and lines respectively. It is possible to combine this with absolute positioning and a color matching the background color to simulate a clipping mask. – Paul Sweatte Jun 27 '12 at 05:40
  • Ok, it seems that will be as close as I will ever get. Bounty goes to you @Paul! Thanks :) – Jovan Perovic Jun 29 '12 at 07:05
  • No problem. Good VML/SVG question. – Paul Sweatte Jun 29 '12 at 17:47