Clipping in SVG

I cannot help but think I still have several, fundamental gaps in my SVG knowledge. This is OK. Well… mostly OK.

My primary focus nowadays is Polymer, not SVG. As I ready to produce the screencasts for the “Extras” edition of Patterns in Polymer I am trying to gain some understanding of SVG so that I can produce an <x-pizza> custom element that enables hungry folks to build their own pizzas:



I am almost certainly over-thinking the SVG component of this, but I hate to recommend an approach that proves difficult or impossible to maintain. All the more so if the recommendation is going into video. I am going to have a hard enough time producing videos that will withstand 6 months of Polymer development without worrying about messing up something as old as SVG.

So tonight, I take one more try at getting the individual toppings to popup and generate a drop shadow without getting clipped:



Those toppings are loaded from SVG assets and inserted directly into the base pizza SVG, <svg> tag and all. This seems to work just fine save for the clipping when I translate the topping SVG inside the base SVG. My first fix try is to set overflow=visible. I start with the generic Dart method that takes the previously loaded asset to create a new topping:

  _svgImage(basename) {
    var svg = new GElement()
      ..append(new SvgElement.svg(svgContent['$basename.svg']));

    svg.setAttribute('overflow', 'visible');
    svg.query('svg').setAttribute('overflow', 'visible');

    var path = svg.query('path');
    path.setAttribute('overflow', 'visible');
    var style = path.getAttribute('style');

    return svg
      ..onMouseOver.listen((e){ /* ... */ })
      ..onMouseLeave.listen((e){ /* ... */ });
  }

And, although that attribute is seen in the resulting DOM, it has no effect on the clipping of my topping elements:



And, unfortunately, I find similar results when I try to set the clipping area:

    // ...
    svg
      ..setAttribute('overflow', 'visible')
      ..setAttribute('clip', 'rect(-50px, 50px, 50px, -50px)');

    svg.query('svg')
      ..setAttribute('overflow', 'visible')
      ..setAttribute('clip', 'rect(-50px, 50px, 50px, -50px)');

    var path = svg.query('path')
      ..setAttribute('overflow', 'visible')
      ..setAttribute('clip', 'rect(-50px, 50px, 50px, -50px)');
    // ...

For what it is worth, setting the clip property on the SVG asset does have an effect. If I make it small (20 pixels on a 32 square pixel image):

    // ...
    svg.query('svg')
      ..setAttribute('overflow', 'visible')
      ..setAttribute('clip', 'rect(-50px, 20px, 20px, -50px)');
    // ...

Then the clipping area is noticeably decreased:



But there does not seem to be a way to set the clipping area to negative values so that it expands outside the original image. Bother.

In the end, I give up. Well, I get it working, but in a completely unsatisfactory manner. I create the SVG images with the drawings shifted slightly to the top-left corner. Then, in the _svgImage() method, I make the rest position of the toppings shifted down and to the right (i.e. more toward the center of the image):

  _svgImage(basename) {
    var svg = new GElement()
      ..append(new SvgElement.svg(svgContent['$basename.svg']));

    svg.query('svg')
      ..setAttribute('overflow', 'visible')
      ..setAttribute('clip', 'rect(-50px, 50px, 50px, -50px)');

    var path = svg.query('path')
      ..setAttribute('transform', 'translate(2.8577037,1.6074583)');
    var style = path.getAttribute('style');

    return svg
      ..onMouseOver.listen((e){
          path
            ..setAttribute('style', '$style;filter:url(#topping-drop-shadow)')
            ..setAttribute('transform', 'translate(0,0)');
        })
      ..onMouseLeave.listen((e){
          path
            ..setAttribute('style', style)
            ..setAttribute('transform', 'translate(2.8577037,1.6074583)');
      });
  }

The mouse-enter and mouse-leave stream listeners now have to adjust accordingly.

Which does the trick:



Not wanting to turn this into an SVG chain, I will probably call a halt to clipping investigation there. The solution is not at all satisfactory, but it works. And if any viewers know how to do it right, they ought to be able to mentally correct this approach without much effort.


Day #75

‹prev | My Chain | next›