Skip to content

Instantly share code, notes, and snippets.

@haiau79

haiau79/app.html

Forked from jdanyow/app.html
Last active September 21, 2016 19:05
Show Gist options
  • Save haiau79/cef24c98e01402db7e7335464ff9e513 to your computer and use it in GitHub Desktop.
Save haiau79/cef24c98e01402db7e7335464ff9e513 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia RequireJS Gist
Raw
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>
Raw
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");
}
}
Display the source blob
Display the rendered blob
Raw
e-3.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="400" height="400">
<defs id="defs4"/>
<g transform="translate(-147.06733,-109.44716)">
<path d="M 157.98695,184.38488 L 173.37483,168.20017 C 182.38616,159.18884 197.56012,162.31477 197.56012,162.31477 L 242.58958,168.47612 L 265.39575,146.16045 C 277.41087,134.35989 288.26269,152.4142 283.54247,158.63631 L 271.83305,172.24635 L 320.32641,181.22794 L 336.78707,162.03882 C 354.38063,141.01237 367.47041,159.95529 359.53185,171.11218 L 348.89521,184.56906 L 421.75804,194.07153 C 484.40828,133.78139 509.98537,108.77262 526.46939,123.63021 C 543.05967,138.5836 513.71315,168.38877 456.64135,227.17701 L 467.00204,302.24678 L 482.26714,289.52597 C 491.27847,282.01653 507.27901,294.06392 490.75822,309.72648 L 469.76089,329.52825 L 478.61969,378.66527 L 491.73923,368.58052 C 503.32523,359.35463 517.39476,371.55518 501.7322,388.29052 L 480.88803,409.28786 C 480.02981,409.93153 487.69305,452.38631 487.69305,452.38631 C 492.41327,473.19821 480.67347,480.80195 480.67347,480.80195 L 466.35838,493.27782 L 411.97962,339.67439 C 407.47395,326.15738 396.0546,311.47862 376.97351,313.22076 C 366.8894,314.29354 341.41552,331.49026 337.98263,335.56682 L 279.00579,392.27531 C 277.5039,393.34809 288.07915,465.99635 288.07915,465.99635 C 288.07915,468.14191 269.38054,492.66454 269.38054,492.66454 L 232.01433,426.14725 L 213.56128,434.7301 L 224.35108,417.93211 L 157.06733,379.9526 L 182.29502,361.49956 C 194.31014,364.28878 257.3034,371.36975 258.59073,370.72608 C 258.59073,370.72608 309.88762,319.85344 312.81633,316.77643 C 329.76623,298.96831 335.46935,292.31456 338.04402,283.51778 C 340.6208,274.71377 336.23117,261.81195 309.62838,245.4769 C 272.93937,222.94855 157.98695,184.38488 157.98695,184.38488 z" id="path3166" style="fill:#000000;stroke:none;"/>
</g>
</svg>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment