arjanvanderleden/app.html

## app.html
<template>
  <require from="./svg-container"></require>
  <svg-container document.bind="document"></svg-container>
</template>

## app.js
import {SvgRect} from './svg-rect'
export class App {
  document
  constructor(){
    this.document = {
      rects : [
        new SvgRect(),
        new SvgRect()
        ]
    }
  }

}


## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## styles.css
/* todo: add styles */

## svg-container.html
<template>
  <require from="./svg-rect"></require>
  <div class="container" ref="container">
    <svg width="100%" height="400" style="background-color:#CFC">
      <rect repeat.for="rect of document.rects" y.bind="($index * 90) + 90"  width="200" height="80" stroke="#000" stroke-width="1" fill="#CFF"></rect>
      <circle cx="100" cy="100" r="50" fill="#FCC" stroke="#000" stroke-width="1"/>
      <svg-rect repeat.for="rect of document.rects" node.bind="rect" containerless="containerless"></svg-rect>
    </svg>
  </div>
</template>

## svg-container.js
import {inject,bindable} from 'aurelia-framework';


export class SvgContainer{
    @bindable container;
    @bindable document;

}

## svg-rect.html
<template>
    <svg>
      <rect width="80" height="200" stroke="#999" stroke-width="1" fill="#FFF" stroke="#000" stroke-width="1"></rect>
    </svg>
</template>

## svg-rect.js
import {bindable} from 'aurelia-framework';
export class SvgRect {
    @bindable node;
}
	<template>
	<require from="./svg-container"></require>
	<svg-container document.bind="document"></svg-container>
	</template>
	import {SvgRect} from './svg-rect'
	export class App {
	document
	constructor(){
	this.document = {
	rects : [
	new SvgRect(),
	new SvgRect()
	]
	}
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	<require from="./svg-rect"></require>
	<div class="container" ref="container">
	<svg width="100%" height="400" style="background-color:#CFC">
	<rect repeat.for="rect of document.rects" y.bind="($index * 90) + 90" width="200" height="80" stroke="#000" stroke-width="1" fill="#CFF"></rect>
	<circle cx="100" cy="100" r="50" fill="#FCC" stroke="#000" stroke-width="1"/>
	<svg-rect repeat.for="rect of document.rects" node.bind="rect" containerless="containerless"></svg-rect>
	</svg>
	</div>
	</template>
	import {inject,bindable} from 'aurelia-framework';


	export class SvgContainer{
	@bindable container;
	@bindable document;

	}
	<template>
	<svg>
	<rect width="80" height="200" stroke="#999" stroke-width="1" fill="#FFF" stroke="#000" stroke-width="1"></rect>
	</svg>
	</template>
	import {bindable} from 'aurelia-framework';
	export class SvgRect {
	@bindable node;
	}