haiau79/app.html

## app.html
<template>
  <object type="image/svg+xml" id="svgId"
        data="e-3.svg" height="50" width="50" viewBox="0 0 50 50"
        mouseover.delegate="domouseover()" mouseout.delegate="domouseout()"
        click.delegate="doClickSVG()">

  </object>

  <div>
      <img src="e-3.svg" click.delegate="doClickSVG()"/>
  </div>
</template>

## app.js
export class App {
  message: string = 'Welcome to Aurelia!';

  domouseover() {
      document.getElementById(event.srcElement.id).style.backgroundColor = "yellow";
      document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "blue";
  }
  domouseout() {
      document.getElementById(event.srcElement.id).style.backgroundColor = "white";
      document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "green";
  }

  doClickSVG() {
      alert("in doClickSVG");
  }
}

## e-3.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              e-3.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<object type="image/svg+xml" id="svgId"
	data="e-3.svg" height="50" width="50" viewBox="0 0 50 50"
	mouseover.delegate="domouseover()" mouseout.delegate="domouseout()"
	click.delegate="doClickSVG()">

	</object>

	<div>
	<img src="e-3.svg" click.delegate="doClickSVG()"/>
	</div>
	</template>
	export class App {
	message: string = 'Welcome to Aurelia!';

	domouseover() {
	document.getElementById(event.srcElement.id).style.backgroundColor = "yellow";
	document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "blue";
	}
	domouseout() {
	document.getElementById(event.srcElement.id).style.backgroundColor = "white";
	document.getElementById(event.srcElement.id).getSVGDocument().getElementById("fillColor").style.fill = "green";
	}

	doClickSVG() {
	alert("in doClickSVG");
	}
	}
	<!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://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>