Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Template references in SVG not working #208

Open
ebidel opened this issue Dec 31, 2014 · 2 comments
Open

Template references in SVG not working #208

ebidel opened this issue Dec 31, 2014 · 2 comments

Comments

@ebidel
Copy link
Contributor

ebidel commented Dec 31, 2014

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
@ebidel ebidel mentioned this issue Dec 31, 2014
Closed
@ghost
Copy link

ghost commented Jan 1, 2015

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
Copy link
Contributor

You can also use <svg template ...> as a workaround, I believe. See Polymer/polymer#681

@crisbeto crisbeto mentioned this issue Sep 5, 2016
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ebidel @arthurevans