diff --git a/demo/index.html b/demo/index.html
index 1cfe629..833b82d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,7 +15,6 @@
-
diff --git a/examples/svg.js b/examples/svg.js
index 80a6d8c..e035314 100644
--- a/examples/svg.js
+++ b/examples/svg.js
@@ -33,43 +33,44 @@ Example.svg = function() {
Runner.run(runner, engine);
// add bodies
- var svgs = [
- 'iconmonstr-check-mark-8-icon',
- 'iconmonstr-paperclip-2-icon',
- 'iconmonstr-puzzle-icon',
- 'iconmonstr-user-icon'
- ];
+ if (typeof fetch !== 'undefined') {
+ var select = function(root, selector) {
+ return Array.prototype.slice.call(root.querySelectorAll(selector));
+ };
- if (typeof $ !== 'undefined') {
- for (var i = 0; i < svgs.length; i += 1) {
- (function(i) {
- $.get('./svg/' + svgs[i] + '.svg').done(function(data) {
- var vertexSets = [],
- color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
+ var loadSvg = function(url) {
+ return fetch(url)
+ .then(function(response) { return response.text(); })
+ .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
+ };
- $(data).find('path').each(function(i, path) {
- var points = Svg.pathToVertices(path, 30);
- vertexSets.push(Vertices.scale(points, 0.4, 0.4));
- });
+ ([
+ './svg/iconmonstr-check-mark-8-icon.svg',
+ './svg/iconmonstr-paperclip-2-icon.svg',
+ './svg/iconmonstr-puzzle-icon.svg',
+ './svg/iconmonstr-user-icon.svg'
+ ]).forEach(function(path, i) {
+ loadSvg(path).then(function(root) {
+ var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
- World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
- render: {
- fillStyle: color,
- strokeStyle: color,
- lineWidth: 1
- }
- }, true));
- });
- })(i);
- }
+ var vertexSets = select(root, 'path')
+ .map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); });
- $.get('./svg/svg.svg').done(function(data) {
- var vertexSets = [],
- color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
-
- $(data).find('path').each(function(i, path) {
- vertexSets.push(Svg.pathToVertices(path, 30));
+ World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
+ render: {
+ fillStyle: color,
+ strokeStyle: color,
+ lineWidth: 1
+ }
+ }, true));
});
+ });
+
+ loadSvg('./svg/svg.svg').then(function(root) {
+ var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
+
+ var vertexSets = select(root, 'path')
+ .map(function(path) { return Svg.pathToVertices(path, 30); });
World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
render: {
@@ -79,6 +80,8 @@ Example.svg = function() {
}
}, true));
});
+ } else {
+ Common.warn('Fetch is not available. Could not load SVG.');
}
World.add(world, [
diff --git a/examples/terrain.js b/examples/terrain.js
index 4235967..49bea7e 100644
--- a/examples/terrain.js
+++ b/examples/terrain.js
@@ -34,39 +34,48 @@ Example.terrain = function() {
Runner.run(runner, engine);
// add bodies
- var terrain;
+ if (typeof fetch !== 'undefined') {
+ var select = function(root, selector) {
+ return Array.prototype.slice.call(root.querySelectorAll(selector));
+ };
- if (typeof $ !== 'undefined') {
- $.get('./svg/terrain.svg').done(function(data) {
- var vertexSets = [];
+ var loadSvg = function(url) {
+ return fetch(url)
+ .then(function(response) { return response.text(); })
+ .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
+ };
- $(data).find('path').each(function(i, path) {
- vertexSets.push(Svg.pathToVertices(path, 30));
+ loadSvg('./svg/terrain.svg')
+ .then(function(root) {
+ var paths = select(root, 'path');
+
+ var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); });
+
+ var terrain = Bodies.fromVertices(400, 350, vertexSets, {
+ isStatic: true,
+ render: {
+ fillStyle: '#060a19',
+ strokeStyle: '#060a19',
+ lineWidth: 1
+ }
+ }, true);
+
+ World.add(world, terrain);
+
+ var bodyOptions = {
+ frictionAir: 0,
+ friction: 0.0001,
+ restitution: 0.6
+ };
+
+ World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
+ if (Query.point([terrain], { x: x, y: y }).length === 0) {
+ return Bodies.polygon(x, y, 5, 12, bodyOptions);
+ }
+ }));
});
-
- terrain = Bodies.fromVertices(400, 350, vertexSets, {
- isStatic: true,
- render: {
- fillStyle: '#060a19',
- strokeStyle: '#060a19',
- lineWidth: 1
- }
- }, true);
-
- World.add(world, terrain);
-
- var bodyOptions = {
- frictionAir: 0,
- friction: 0.0001,
- restitution: 0.6
- };
-
- World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
- if (Query.point([terrain], { x: x, y: y }).length === 0) {
- return Bodies.polygon(x, y, 5, 12, bodyOptions);
- }
- }));
- });
+ } else {
+ Common.warn('Fetch is not available. Could not load SVG.');
}
// add mouse control