Using Meteor to create SVG in template works, but not in #each loop -

update: of february 2014, meteor supports reactive svg, no workaround necessary.

meteor 0.5.9

i create group of shapes, 1 each document in collection. can create shapes 1 @ time in template, not inside of {{#each loop}}.

this works:

<template name="map">   <svg viewbox="0 0 500 600" version="1.1">     <rect x="0" y="0" width="100" height="100" fill={{color}}/>   </svg> </template>  template.map.color = function() {   return "green"; }; 

this not:

<template name="map">   <svg viewbox="0 0 500 600" version="1.1">     {{#each colors}}       <rect x="0" y="0" width="100" height="100" fill={{color}}/>     {{/each}}   </svg> </template>  template.map.colors = function() {   return [{color: "red"}, {color: "blue"}]; } 

anything try create inside of using {{#each}} doesn't show up, though can create them manually, attributes inserted meteor through template.

i tried sending single object {color: "red"} template , using {{#with colors}}, , not work either. in addition svg, i've put plain s templates make sure information gets template correctly, , working expected, {{#each}} , {{#with}}.

should able i'm trying do?

i came across same problem experimenting meteor , svg elements , discovered can add elements , them show 2 methods below. 1 option wrap elements in each loop in <svg></svg>, this:

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> {{#each pieces}}   <svg xmlns="http://www.w3.org/2000/svg"><circle cx="{{x}}" cy="{{y}}" r="1" fill="{{color}}"></circle></svg> {{/each}} </svg> 

another options (on template render) create svg element jquery contains element want insert, use jquery grab inner element , insert svg element in dom, (in coffeescript):

for piece in pieces.find().fetch()   $el = $("<svg><circle cx='#{piece.x}' cy='#{piece.y}' r='1' class='a'></circle></svg>")   $el.find('circle').appendto @$('svg') 

you use d3 or raphaeljs inserting. can make individual elements reactive collection , animate using library d3 in collection observer callbacks (again, coffeescript):

pieces.find().observe {    added: (piece)=>     # using jquery (could use d3 instead)     $el =  $("<svg><circle cx='#{piece.x}' cy='#{piece.y}' r='1' fill='#{piece.color}' data-id='#{piece._id}'></circle></svg>")     $el.find('circle').appendto @$('svg')    changed: (newpiece, oldpiece)=>     # using d3 animate change     d3.select("[data-id=#{oldpiece._id}]").transition().duration(1000).attr {       cx: newpiece.x       cy: newpiece.y       fill: newpiece.color     }    removed: (piece)=>     @$("[data-id=#{piece._id}]").remove() } 

these methods seem work in latest chrome, safari, firefox browsers on mac, haven't tested in others.