Template references in SVG not working

ebidel commented 9 years ago

From @phestermcs on December 31, 2014 8:34

The following shows Some HTML, which should be followed by And some SVG, but only And some is seen. In Chrome 39.0.2171.95 with Polymer 0.5.2, the DOM node for <template ref="svg"... does not contain a #document-fragment; it is empty.

<!DOCTYPE html>
<html>
  <head lang="en">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  </head>
  <body unresolved>
    <template is="auto-binding">
      <template id="html">
        <div>HTML</div>
      </template>

      <div>
        <div>Some</div>
        <template ref="html" bind></template>
      </div>
    </template>

    <template is="auto-binding">
      <template id="svg">
        <text y="60">SVG</text>
      </template>

      <svg width="200" height="200">
        <text y="40">And some</text>
        <template ref="svg" bind></template>
      </svg>
    </template>
  </body>
</html>

Copied from original issue: Polymer/polymer#1061

ghost commented 9 years ago

Please close this issue.

I created this issue over in Polymer/polymer (sorry). After further review, it has been learned any templates containing svg, must themselves be contained within an <svg/> element, which makes since as svg is in a different namespace than html.

For example (note, original html was missing the <link href='polymer.html' ...)

<template is="auto-binding">
  <svg>
    <template id='svg1'>
      <text y='40'>More SVG</text>
    </template>
  </svg>

  <svg width="100" height="100">
    <template id='svg2'>
      <text y='60'>Some SVG</text>
    </template>

    <text y='20'>It Works!</text>
    <template bind ref='svg1'></template>
    <template bind ref='svg2'></template>
  </svg>
</template>

arthurevans commented 9 years ago

You can also use <svg template ...> as a workaround, I believe. See https://github.com/Polymer/polymer/issues/681

googlearchive / TemplateBinding

Template references in SVG not working #208