Skip to content

Instantly share code, notes, and snippets.

@hrldcpr

hrldcpr/gist:4429798

Last active December 10, 2015 11:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hrldcpr/4429798 to your computer and use it in GitHub Desktop.
Save hrldcpr/4429798 to your computer and use it in GitHub Desktop.
Download ZIP
example of trying to use svg in meteor
Raw
gistfile1.html
<head>
<title>Leaderboard</title>
</head>
<body>
<div id="outer">
{{> leaderboard}}
</div>
</body>
<template name="leaderboard">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<!-- this works because the browser parses it in the context of its enclosing namespace -->
<circle cx="50" cy="50" r="10" fill="blue" />
{{#each players}}
<!-- this doesn't work because the circle node needs to be created with createElementNS("http://www.w3.org/2000/svg", "circle") -->
<circle cx="{{score}}" cy="{{score}}" r="{{score}}" fill="red" />
{{/each}}
</svg>
<div class="leaderboard">
{{#each players}}
{{> player}}
{{/each}}
</div>
{{#if selected_name}}
<div class="details">
<div class="name">{{selected_name}}</div>
<input type="button" class="inc" value="Give 5 points" />
</div>
{{/if}}
{{#unless selected_name}}
<div class="none">Click a player to select</div>
{{/unless}}
</template>
<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment