Search code examples
angularjstemplatessvgparent

Angular: How to include static html into dom without surrounding element?

in Angular I want to include a static html template containing svg 'pattern' elements into an inline svg. Is there a way to include just the html without any surrounding tag, div, whatever in Angular?

I've tried ng-include and a directive.

Html Code I want:

    <svg 
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
    >
      <defs>
        <style type="text/css">
           ...
        </style>

        <pattern id="someid"
         ...
        </pattern>

        <pattern id="someotherid"
         ...
        </pattern>

        ... !!!much more patterns!!!...
     </defs>
     ...content...
   </svg>

Html Code I get:

<directive> <pattern>... </directive>

The problem is, that any sourrounding element will break rendering of the svg. The spec does not allow this.

EDIT:

it seems that you have to create any element you want to append to an svg in a proper svg-namespace.

a angular service with custom compile doing that can be found here: Including SVG template in Angularjs directive

This works for elements in svg body, but not for patterns.. :-(

They get inserted fine, but the rendering breaks and looks weird

Solution

  • Yup! You can just use the replace attribute for your directive definition, which replaces the original element in the DOM.

    Example here: http://plnkr.co/edit/jmJi5Q5mp5DDc3xOhJQ8?p=preview