Search code examples
svgaureliaaurelia-templating

Aurelia generated SVG elements are invisible when using custom elements

Why are custom elements in SVG invisible?

Composing Svg with Aurelia is similar to composing html. You have to make sure though that any custom elements are implemented containerless (either by decorating the ViewModel with the `@containerless' attribute or adding an attribute 'containerless' to the custom element tag. SVG is picky about elements that are not defined in the specification and attributes that have the wrong value type.

Even if you have taken care of making them containerless it is still possible the custom elements do not show, even though they are added to the DOM.

Checkout this GistRun. You would expect two white rectangles, that are present in the DOM, above the other elements. But they are not visible.

Solution

  • The reason the elements do not show is because of the comments Aurelia uses to track element positions (<!--<view>-->). You can avoid this issue by wrapping your elements in a SVG tag:

    <template>
   <svg>
      ...
   </svg>
</template>

    See this Gistrun for a working result.

    Edit: Be sure to add an attribute overflow="visible" if you dont want the inner elements to be clipped by the SVG element:

    <template>
   <svg overflow="visible">
       ...
   </svg>
</template>

    More info in the Aurelia cheat sheet : http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9