DOM Animation of SVG

Up today, I try to build on the SVG loading solution for my <x-pizza> custom Dart Polymer element:



Thanks to last night, I am loading SVG content directly into my application via the Polymer Elements' <polymer-ajax>:

<link rel="import" 
      href="../../../packages/polymer_elements/polymer_ajax/polymer_ajax.html">
<polymer-element name="x-pizza">
  <template>
    <polymer-ajax
       id="pizza.svg"
       url="/packages/svg_example/images/pizza.svg"
       on-polymer-response="{{responseReceived}}"></polymer-ajax>
    <polymer-ajax
       id="pepperoni.svg"
       url="/packages/svg_example/images/pepperoni.svg"
       on-polymer-response="{{responseReceived}}"></polymer-ajax>
    <!-- ... -->
  </template>
  <script type="application/dart" src="x_pizza.dart"></script>
</polymer-element>

When each is loaded, I populate a content map:

  Map svgContent = {};
  responseReceived(e, detail, node){
    svgContent[node.id] = detail['response'];
  }

And then use that content to build up groups of toppings from that SVG text:

  _svgPepperoni()   => _svgImage('pepperoni');
  _svgSausage()     => _svgImage('sausage');
  _svgGreenPepper() => _svgImage('green_pepper');

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

To animate, I convert the _svgPepperoni() method to make use of the two layers that I added to the SVG toppings the other day:

  _svgPepperoni() {
    var svg = _svgImage('pepperoni');
    return svg
      ..onMouseOver.listen((e){
        svg.query('#up').style.display = '';
        svg.query('#down').style.display = 'none';
      })
      ..onMouseLeave.listen((e){
        svg.query('#up').style.display = 'none';
        svg.query('#down').style.display = '';
      });
  }

Which does the trick nicely:



Except for one little problem. The SVG image is clipped to 25 pixels, which cuts off the nice drop shadow effect of the topping:



Unfortunately, I can find no explanation for why this is the case. My best guess is that the path only accounts for roughly 25 square pixels, which is where the browser gets this value from. Setting width attributes and style values has no effect. It is also possible that this is a function of adding SVG elements to another SVG:



The “inner” SVG in this case is the pepperoni SVG, which I use to populate a <g> element for the topping. I do try adding the path directly to the topping <g> tag, but even that does not make a difference.

Stumped, I call it a night here. Thankfully, the DOM mouse-over code was quite easy. Hopefully I am just making a dumb SVG mistake with the topping size. I will investigate further tomorrow.

Day #72

‹prev | My Chain | next›