Ember SVG Link

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember City Link'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('ember-link');
});

export default Router;

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<style>
	/* show location of link */
	
	#linkToEmberProblem {
		fill: rgba(224,64,80, .8);
	}
	
</style>

<div class="canvas">
	<h2>City</h2>

	<svg id="city" data-name="city" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 916.8 711.36" fill=transparent>
		
		<image width="1200" height="800" xlink:href="http://portalcmspic.sz2011.org/pic//2011/01/03/6b1ca08e36d44e72a5f36d6eec5785ab/KckcZwGxJhemzKZhRYKNEJinaZzlSaeF.jpg"/>

			{{#link-to 'ember-link' }}
				<rect id="linkToEmberProblem" x="47" y="460" width="300" height="200"/>
		  {{/link-to}}
		
	</svg>
</div>

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}