Javascript for Isometric image click isn't working? - javascript
I have created a cube with a few rectangles on the inside using illustrator and I wanted to use javascript and HTML to show the rectangles on the inside when someone hovers over the cube but nothing is working! Please help me.
My html is:
<html>
<head>
<meta charset="UTF-8">
<title>snap1.1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/snap.svg.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<svg id="squares"></svg>
</body>
</html>
The javascript is:
$(document).ready(
function () {
var s = Snap("#squares");
Snap.load("./svg/hide_the_world.svg", function (data)
{
flatWorld = data.select("#flatWorld");
s.append(flatWorld);
hoverBoard = s.select("#hideSides");
world = s.select("#world");
leftSide = s.select("#left");
rightSide = s.select("#right");
topSide = s.select("#top");
//hoverBoard.hover(inBoard,outBoard);
//hoverBoard.click(hoverBoardClick);
world.click(clickWorld);
leftSide.click(clickLeft);
rightSide.click(clickRight);
topSide.click(clickTop);
}
);
var inWorld = function () {
}
var outWorld = function () {
$("#world").css("fill","green");
}
var clickTop = function () {
topSide.animate({ transform: 'translate( 0,-1000)' }, 1000, mina.easeinout );
}
var clickLeft = function () {
leftSide.animate({ transform: 'translate(-300,176)' }, 1000, mina.easeinout );
}
var clickRight = function () {
rightSide.animate({ transform: 'translate(300,176)' }, 1000, mina.easeinout );
}
var hoverBoardClick = function () {
hoverBoard.animate({'opacity': 0.0}, 250);
//hoverBoard.animate({ transform: 'translate( 0,-3000)' }, 1000, mina.easeinout );
}
var moveBoard = function () {
//alert("moveBoard");
hoverBoard.transform('translate(0,-1000)');
}
var inBoard = function () {
//alert("bob");
hoverBoard.animate({'opacity': 0.0}, 250, mina.easeinout, moveBoard);
}
var outBoard = function () {
hoverBoard.animate({'opacity': 1.0}, 250);
}
}
);
I'm not sure if you need my SVG code but here it is too:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="flatWorld" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-99 101 600 600" style="enable-background:new -99 101 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st4{fill:#AF6464;}
.st5{fill:#79C679;}
.st6{fill:#887AC4;}
.st7{fill:#655E8E;}
.st8{font-family:'SnellRoundhand';}
.st9{font-size:4.5217px;}
.st10{fill:#61C6C6;}
.st11{font-size:13.9783px;}
.st12{fill:#B8B9C1;}
.st13{font-family:'Noteworthy-Light';}
.st14{font-size:12px;}
.st15{fill:#659392;}
.st16{fill:#A1D672;}
</style>
<g>
<polygon class="st0" points="214,571.7 40.8,471.7 214,371.7 387.2,471.7 "/>
</g>
<g>
<polygon class="st1" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st1" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st1" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<g>
<polygon class="st2" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st2" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st2" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<path class="st2" d="M86.5,298c-4.1,6.8-7.9,13.8-11.6,20.9c-3.3,6.4-16.1,23.6-13,30.6c11.4,25.8,22.4,51.8,33.6,77.7
c4.4,19.3,8.9,38.5,13.3,57.8c0.1,4.5,55.5,7.8,61.2,12.8c14.4,12.5,28.7,28.6,44.8,38.8c2.4,1.5,17.8-15.3,19.5-16.9
c19.8-19.3,39.5-38.6,59.6-57.6c0,0,0.1-0.1,0.1-0.1c2-1.9,9.3-2.5,11.8-3.2c9.1-4.5,21.8-5.9,31.7-8.5c3.4-0.9,18.2-4.1,19.3-6.6
c0.4-1.1-1.1-4.8-1.3-5.9c-1.7-7.5-3.4-15-5.1-22.5c-4.3-19.3-8.7-38.6-13-57.8c-1.3-5.9-4.3-13.1-4.3-19.1c0-7.3,7.7-17.6,11-23.8
c4.7-9,9.6-18.2,15.1-26.6c-12.8-4.9-25.7-9.7-38.5-14.5c-5.7-2.2-11.5-4.3-17.2-6.5c-1.4-0.5-6.1-1.4-7-2.6
c-5.5-7.4-11-14.7-16.6-22.1c-4.2-5.5-8.3-11.1-12.5-16.6c-2.7-3.6-6.5-11.2-11.1-12.2c-16.3-3.5-32.5-7-48.8-10.6
c0,0-48.3,43.2-48.9,43.7c-1.3,1.2-8.2,0.9-9.9,1.1c-8.1,0-16,1.4-24,2.5c-4.8,0.7-5.3,0.7-8.4,4c-7.2,8-12.9,18.5-19,27.4
C93.3,286.9,89.8,292.4,86.5,298z"/>
<path class="st2" d="M120.1,257.8c-0.7,0.6-1.3,1.4-1.8,2.2c-9.5,13.6-19.1,27.1-28.6,40.7c-5.7,8.1-9.6,17.2-13.7,26.1
c-2.6,5.4-9.2,11.2-9,17.9c0.2,7.5,6.8,17.7,9.7,24.7c8.6,21,19.6,41.3,24.6,63.6c2.1,9.4,3.9,18.9,5.8,28.4
c0.8,4,0.2,13.3,3.6,15.9c1.3,1,3,1.4,4.6,1.7c12.4,2.5,24.9,5.2,37.3,7.8c5.8,1.2,12.5,1.8,18,3.9c4.8,1.8,43.5,36.6,44.4,36.1
c7.7-4.7,13.1-12.7,19.5-18.9c7.6-7.4,15.3-14.8,22.9-22.2c6.8-6.5,13.5-13.1,20.3-19.6c1.9-1.8,5.9-7.5,8.5-8.2
c0,0,60.7-16.3,60.7-16.3c-3-14.1-6.1-28.2-9.1-42.3c-2.4-11.2-4.8-22.5-7.3-33.7c-2-9.2-7-19.4-6.2-28.9c0.5-6.1,5.3-12.4,8.2-17.9
c3.1-5.7,6-11.5,9-17.2c1.1-2.2,4.9-6.7,4.9-9.1c0-2.9,0.4-1.3-1.4-3c-3.7-3.5-13-5.2-17.6-7.1c-5.1,0-13.3-5.3-18.1-7.3
c-4.8-1.9-11.6-3.2-15-7.4c-6.9-8.6-13.8-17.3-20.7-26c-5-6.3-8.4-14.5-14.8-19.6c-4.8-3.8-12-4.2-17.9-5.4
c-7.3-1.6-14.5-3.1-21.8-4.7c-2.8-0.6-6.8-3-9.7-2.5c-5.8,1.1-10.4,8.2-14.5,12c-5.3,4.9-10.8,9.5-16.2,14.3
c-3.7,0-14.6,13.1-17.3,15.6c-0.9,0.8-1.7,1.6-2.8,2.2c-5.7,3-16.7,2.1-23.1,2.7C130.8,256.5,123.7,254.9,120.1,257.8
C120.1,257.8,120.1,257.8,120.1,257.8z"/>
<line class="st3" x1="213.5" y1="212" x2="213.5" y2="372"/>
<line class="st3" x1="214" y1="371.7" x2="102.9" y2="433.9"/>
<line class="st3" x1="214" y1="371.7" x2="339.2" y2="442.8"/>
<rect x="135.9" y="269" class="st4" width="35.9" height="206"/>
<rect x="183" y="269" class="st5" width="35.9" height="206"/>
<rect x="231.1" y="269" class="st6" width="35.9" height="206"/>
<rect x="266.1" y="276" transform="matrix(0.9316 0.3635 -0.3635 0.9316 155.9605 -77.5507)" class="st7" width="35.9" height="199.3"/>
<rect x="135.9" y="279.6" class="st5" width="35.9" height="12.4"/>
<text transform="matrix(0.9373 0 0 1 141.0549 288.2795)" class="st8 st9">Half of my heart</text>
<rect x="183" y="449.7" class="st10" width="35.9" height="12.4"/>
<rect x="183" y="282.1" class="st10" width="35.9" height="12.4"/>
<text transform="matrix(1.146950e-02 -1.1451 0.9999 1.001592e-02 206.0669 400.9011)" class="st8 st11">BIBLE</text>
<rect x="231.1" y="279.6" class="st12" width="35.9" height="12.4"/>
<rect x="294.6" y="295.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 131.109 -93.0543)" class="st10" width="36.5" height="12.4"/>
<text transform="matrix(-7.525938e-03 1 -1 -7.525938e-03 242.3439 305.506)" class="st13 st14">The childrens book</text>
<rect x="277.6" y="340" transform="matrix(0.9316 0.3634 -0.3634 0.9316 146.0477 -83.8479)" class="st15" width="36.5" height="12.4"/>
<rect x="243.4" y="427.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 175.5866 -65.399)" class="st16" width="36.5" height="12.4"/>
<g id="hideSides">
<polygon id="left" class="st2" points="214,572 40.8,472 40.8,272 214,372 "/>
<polygon id="top" class="st2" points="214,372 40.8,272 214,172 387.2,272 "/>
<polygon id="right" class="st2" points="387.2,472 214,572 214,372 387.2,272 "/>
</g>
</svg>
Thank you so so much
Related
Is it possible to programatically control fill color of individual cells of svg pattern?
<svg viewBox="200 190 500 500" id="example"> <defs> <pattern id="patt" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <g stroke="black" strokeWidth="0.5" > <path id='a' fill='green' d="M0,0.054V20h21V0.054H0z M15.422,18.129l-5.264-2.768l-5.265,2.768l1.006-5.863L1.64,8.114l5.887-0.855 l2.632-5.334l2.633,5.334l5.885,0.855l-4.258,4.152L15.422,18.129z"/> </g> </pattern> </defs> <g fill="url(#patt)" stroke="orange" > <circle cx="450" cy="300" r="100"/> </g> </svg> Requirement is to create a pattern of svg in which fill color of each element in the pattern has to be manipulated.
Only when you create all colored shapes inside the <pattern> yourself:
<svg-pattern colors="green,red,blue,yellow"></svg-pattern>
<svg-pattern colors="purple,hotpink,hotpink,purple"></svg-pattern>
<script>
customElements.define("svg-pattern", class extends HTMLElement {
connectedCallback() {
let colors = this.getAttribute("colors").split(",");
let star = `v20h21v-20h-21zm15.4 18-5.3-2.8-5.3 2.8 1-5.9-4.3-4.2 5.9-.9 2.6-5.3 2.6 5.3 5.9.9-4.3 4.2 1 6z`;
let id = "unique" + Math.random();
this.innerHTML = `<svg width="180" height="180" style="display:inline-block" viewBox="0 0 200 200">
<defs>
<pattern id="${id}" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<g stroke="black" strokeWidth="0.5" >
<path fill='${colors[0]}' d="m0 0 ${star}"/>
<path fill='${colors[1]}' d="m20 0 ${star}"/>
<path fill='${colors[2]}' d="m0 20 ${star}"/>
<path fill='${colors[3]}' d="m20 20 ${star}"/>
</g>
</pattern>
</defs>
<g fill="url(#${id})">
<circle cx="100" cy="100" r="100"/>
</g>
</svg>`;
}
});
</script>
How to reverse the order of svg elements
I am working with a svg element which is following
<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<rect class="bg" id="bg" width="150" height="150" fill="#e6e6e6"></rect>
<circle class="circ0" id="circ0" cx="75" cy="75" r="72" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ1" id="circ1" cx="75" cy="75" r="69" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ2" id="circ2" cx="75" cy="75" r="66" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"></circle>
<script href="index.js"></script>
</svg>
I want to reverse the order of these circles with javascript, which I am currently doing by this way
const svg = document.querySelector("svg");
var x = document.querySelectorAll("[class^='circ']");
var bucket = [];
x.forEach((a, i) => {
bucket.push(a)
});
bucket.reverse();
x.forEach(
(a, i) => a.parentNode.removeChild(a)
);
bucket.forEach(
(a, i) => {
a.setAttribute("class", 'circ' + [i]);
a.setAttribute("id", "circ" + [i]);
svg.appendChild(a);
}
)
<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<rect class="bg" id="bg" width="150" height="150" fill="#e6e6e6"></rect>
<circle class="circ0" id="circ0" cx="75" cy="75" r="72" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ1" id="circ1" cx="75" cy="75" r="69" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ2" id="circ2" cx="75" cy="75" r="66" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"></circle>
<script href="index.js"></script>
</svg>
It gives me this
Is there a better way of doing this?
append(child) by itself moves DOM Nodes. So your code can be simplified.
But for complexer SVG you probably want to swap DOM positions, because there could be other Elements in between you don't want to affect.
Hold CTRL key to see what happens with append
Click to see the swapping version,
a matter of processing an Array and swapping the first with the last element.
Note: append was not available in Internet Explorer, that is why you see most posts using appendChild.
Modern browsers have loads more DOM goodies: replaceWith after , before etc.
<svg viewBox="0 0 10 10" style="height:200px">
<style>
text { font-size: 2px }
[y="3"]{ fill:yellow }
.first { stroke: black; stroke-width: 0.5 }
</style>
<rect class="bg" id="bg" width="10" height="10" fill="grey"></rect>
<circle class="first" id="c0" cx="2" cy="5" r="2" fill="red" />
<text x="0" y="3">R</text>
<circle class="second" id="c1" cx="4" cy="5" r="3" fill="green" />
<text x="1" y="3">G</text>
<circle class="last" id="c2" cx="6" cy="5" r="4" fill="blue" />
<text x="2" y="3">B</text>
<text x="1" y="6">Click Me!</text>
</svg>
<script>
let svg = document.querySelector("svg");
function append() {
[...svg.querySelectorAll("circle")]
.reverse().forEach((c, i) => {
c.parentNode.append(c);
c.setAttribute("class", c.id = 'c' + i);
});
}
function swap() {
function swapElements(e1, e2) {
let {id,previousSibling,className:{baseVal:c2}} = e2;
e1.after(e2); // put e2 after e1
e2.id = e1.id; e2.setAttribute("class", e1.getAttribute("class"));
previousSibling.after(e1); // put e1 after where e2 WAS
e1.id = id; e1.setAttribute("class", c2);
}
let circles = [...svg.querySelectorAll("circle")];
while (circles.length) {
let c1 = circles.shift();
if (circles.length) swapElements(c1, circles.pop())
}
}
svg.onclick = (e) => (e.ctrlKey && append()) || swap();
</script>
SVG is not showing center while animating and after finished animation
I am new in javascript & SVG Can any one help me get out of this stuck
trying keep center clock image while resize using elem.style.left and elem.style.topp;
or any chance to use zoom function using plain javascript
or suggest any work around achieve get center of SVG element
or suggest any work around achieve get center of SVG element
or suggest any work around achieve get center of SVG element
or suggest any work around achieve get center of SVG element
var elem = document.getElementById("clock1");
var pos = 0
var id = setInterval(frame, 5);
var id2 = setInterval(frame2, 5);
//resize div
function frame() {
if (pos == 600) {
clearInterval(id); //stop animation
} else {
//set defualt size of SVG (elem)
elem.style.width = "0px";
elem.style.height = "0px";
pos++;
//resize width & Height for zoom svg (elem)
if(pos < 600) {
elem.style.width = pos + 'px';
elem.style.height = pos + 'px';
} else {
elem.style.width = pos + 'px';
elem.style.height = pos + 'px';
};
};
};
//function for set center of svg (elem)
function frame2 () {
elem.style.top = "0px";
elem.style.left = "0px" ;
if(elem.style.left > "0.5px") {
var test =parseInt(document.getElementById("wrapper").style.width); // for get center
var test2 = parseInt(elem.style.width); //remove px
var left = parseInt(elem.style.left); //remove px
var calculatedwidth = Math.max(((test - test2) / 2) +
left) ;// for get center
var modifiedwidth = calculatedwidth;
elem.style.left =calculatedwidth; //set position
elem.style.top =calculatedwidth; //set position
};
};
#clock1 {
width: 219px;
height: 207px;
position: absolute;
background-color:#fff;
/* transform: translate(-50%, -50%);*/
}
<html lang="en">
<!-- Creator: CorelDRAW -->
<head>
</head>
<body>
<div style="width:234px; height:258px; background-color:green; overflow:hidden; justify-content: center; top: 0px !important; left: 0px; position: absolute;" id="wrapper" >
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" height="297mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd;position: absolute; "
viewBox="0 0 200 200"
xmlns:xlink="http://www.w3.org/1999/xlink" id="clock1" >
<defs>
<style type="text/css">
<![CDATA[
.fil1 {fill:black}
.fil2 {fill:#AA0000}
.fil0 {fill:white}
]]>
</style>
</defs>
<g id="Layer_x0020_1" >
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_239192552">
<circle id="_239615328" class="fil0" cx="107.366" cy="108.741" r="79.375"/>
<g>
<g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239615616" class="fil1" />
</g>
<g>
<polygon id="_239615664" class="fil1" />
</g>
<g>
<polygon id="_239615736" class="fil1" />
</g>
<g>
<polygon id="_239602424" class="fil1" />
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239602256" class="fil1" points="151.673,45.1189 154.182,46.9414 149.626,53.2125 147.117,51.39 "/>
</g>
<g>
<polygon id="_239602160" class="fil1" points="158.081,50.0988 160.385,52.1735 155.198,57.934 152.894,55.8593 "/>
</g>
<g>
<polygon id="_239602112" class="fil1" points="163.933,55.7213 166.008,58.0255 160.247,63.2122 158.172,60.908 "/>
</g>
<g>
<polygon id="_239602208" class="fil1" points="169.165,61.9246 170.988,64.433 164.716,68.9892 162.894,66.4808 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239602376" class="fil1" points="177.548,75.7965 178.809,78.629 171.728,81.7818 170.467,78.9493 "/>
</g>
<g>
<polygon id="_239601872" class="fil1" points="180.607,83.313 181.565,86.2618 174.193,88.6571 173.235,85.7083 "/>
</g>
<g>
<polygon id="_239601008" class="fil1" points="182.864,91.1082 183.509,94.141 175.927,95.7526 175.282,92.7198 "/>
</g>
<g>
<polygon id="_239601488" class="fil1" points="184.294,99.0965 184.618,102.18 176.909,102.99 176.585,99.9067 "/>
</g>
</g>
</g>
<g>
<polygon id="_239601464" class="fil1" points="104.265,31.2262 110.466,31.2262 110.466,54.4806 104.265,54.4806 "/>
</g>
<g>
<polygon id="_239601272" class="fil1" points="143.438,40.0609 148.808,43.1615 139.506,59.2726 134.136,56.172 "/>
</g>
<g>
<polygon id="_239601392" class="fil1" points="172.945,67.2983 176.046,72.6687 159.935,81.9705 156.834,76.6001 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239601440" class="fil1" points="184.618,115.302 184.294,118.385 176.585,117.575 176.909,114.491 "/>
</g>
<g>
<polygon id="_239600984" class="fil1" points="183.509,123.341 182.864,126.373 175.282,124.762 175.927,121.729 "/>
</g>
<g>
<polygon id="_239602544" class="fil1" points="181.565,131.22 180.607,134.168 173.235,131.773 174.193,128.824 "/>
</g>
<g>
<polygon id="_239602760" class="fil1" points="178.809,138.853 177.548,141.685 170.467,138.532 171.728,135.7 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239602496" class="fil1" points="170.988,153.049 169.165,155.557 162.894,151.001 164.716,148.492 "/>
</g>
<g>
<polygon id="_239602928" class="fil1" points="166.008,159.456 163.933,161.76 158.172,156.574 160.247,154.269 "/>
</g>
<g>
<polygon id="_239584160" class="fil1" points="160.385,165.308 158.081,167.383 152.894,161.622 155.198,159.548 "/>
</g>
<g>
<polygon id="_239584424" class="fil1" points="154.182,170.54 151.673,172.363 147.117,166.092 149.626,164.269 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239584304" class="fil1" points="140.31,178.923 137.477,180.185 134.325,173.103 137.157,171.842 "/>
</g>
<g>
<polygon id="_239584256" class="fil1" points="132.793,181.983 129.845,182.941 127.449,175.569 130.398,174.61 "/>
</g>
<g>
<polygon id="_239583992" class="fil1" points="124.998,184.239 121.965,184.884 120.354,177.302 123.387,176.657 "/>
</g>
<g>
<polygon id="_239583776" class="fil1" points="117.01,185.669 113.926,185.993 113.116,178.284 116.2,177.96 "/>
</g>
</g>
</g>
<g>
<polygon id="_239583248" class="fil1" points="184.88,105.64 184.88,111.841 161.626,111.841 161.626,105.64 "/>
</g>
<g>
<polygon id="_239583392" class="fil1" points="176.046,144.813 172.945,150.183 156.834,140.881 159.934,135.511 "/>
</g>
<g>
<polygon id="_239583464" class="fil1" points="148.808,174.32 143.438,177.421 134.136,161.31 139.506,158.209 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239583440" class="fil1" points="100.805,185.993 97.7213,185.669 98.5315,177.96 101.615,178.284 "/>
</g>
<g>
<polygon id="_239583704" class="fil1" points="92.7658,184.884 89.733,184.239 91.3446,176.657 94.3774,177.302 "/>
</g>
<g>
<polygon id="_239582528" class="fil1" />
</g>
<g>
<polygon id="_239583128" class="fil1" points="77.2538,180.185 74.4213,178.923 77.5741,171.842 80.4066,173.103 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239582720" class="fil1" points="63.0578,172.363 60.5494,170.54 65.1056,164.269 67.614,166.092 "/>
</g>
<g>
<polygon id="_239582480" class="fil1" points="56.6503,167.383 54.3461,165.308 59.5328,159.548 61.837,161.622 "/>
</g>
<g>
<polygon id="_239582648" class="fil1" points="50.7983,161.76 48.7236,159.456 54.4841,154.269 56.5588,156.574 "/>
</g>
<g>
<polygon id="_239583080" class="fil1" points="45.5662,155.557 43.7437,153.049 50.0148,148.492 51.8373,151.001 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239582672" class="fil1" points="37.183,141.685 35.9219,138.853 43.0032,135.7 44.2643,138.532 "/>
</g>
<g>
<polygon id="_239564880" class="fil1" points="34.1239,134.169 33.1658,131.22 40.5379,128.825 41.496,131.773 "/>
</g>
<g>
<polygon id="_239564976" class="fil1" points="31.8672,126.373 31.2226,123.341 38.8047,121.729 39.4493,124.762 "/>
</g>
<g>
<polygon id="_239564832" class="fil1" points="30.4376,118.385 30.1135,115.302 37.8225,114.491 38.1466,117.575 "/>
</g>
</g>
</g>
<g>
<polygon id="_239564376" class="fil1" points="110.466,186.255 104.265,186.255 104.265,163.001 110.466,163.001 "/>
</g>
<g>
<polygon id="_239564304" class="fil1" points="71.2935,177.421 65.9231,174.32 75.2249,158.209 80.5953,161.31 "/>
</g>
<g>
<polygon id="_239564352" class="fil1" points="41.7862,150.183 38.6856,144.813 54.7967,135.511 57.8973,140.881 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<g>
<g>
<polygon id="_239564112" class="fil1" points="30.1135,102.18 30.4376,99.0965 38.1466,99.9067 37.8225,102.99 "/>
</g>
<g>
<polygon id="_239564184" class="fil1" points="31.2225,94.141 31.8671,91.1082 39.4492,92.7198 38.8046,95.7526 "/>
</g>
<g>
<polygon id="_239564472" class="fil1" points="33.1657,86.2619 34.1238,83.3131 41.4959,85.7084 40.5378,88.6572 "/>
</g>
<g>
<polygon id="_239564664" class="fil1" points="35.9219,78.629 37.183,75.7965 44.2643,78.9493 43.0032,81.7818 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239441184" class="fil1" points="43.7437,64.433 45.5662,61.9246 51.8373,66.4808 50.0148,68.9892 "/>
</g>
<g>
<polygon id="_239441592" class="fil1" points="48.7236,58.0255 50.7983,55.7213 56.5588,60.908 54.4841,63.2122 "/>
</g>
<g>
<polygon id="_239441520" class="fil1" points="54.3461,52.1735 56.6503,50.0988 61.837,55.8593 59.5328,57.934 "/>
</g>
<g>
<polygon id="_239441736" class="fil1" points="60.5494,46.9414 63.0578,45.1189 67.614,51.39 65.1056,53.2125 "/>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon id="_239441112" class="fil1" points="74.4213,38.5582 77.2538,37.2971 80.4066,44.3784 77.5741,45.6395 "/>
</g>
<g>
<polygon id="_239441304" class="fil1" points="81.9378,35.4991 84.8866,34.541 87.2819,41.9131 84.3331,42.8712 "/>
</g>
<g>
<polygon id="_239441424" class="fil1" points="89.733,33.2424 92.7658,32.5978 94.3774,40.1799 91.3446,40.8245 "/>
</g>
<g>
<polygon id="_239441880" class="fil1" points="97.7213,31.8128 100.805,31.4887 101.615,39.1977 98.5315,39.5218 "/>
</g>
</g>
</g>
<g>
<polygon id="_239458728" class="fil1" points="29.851,111.841 29.851,105.64 53.1054,105.64 53.1054,111.841 "/>
</g>
<g>
<polygon id="_239458584" class="fil1" points="38.6857,72.6687 41.7863,67.2983 57.8974,76.6001 54.7968,81.9705 "/>
</g>
<g>
<polygon id="_239458632" class="fil1" points="65.9231,43.1614 71.2935,40.0608 80.5953,56.1719 75.2249,59.2725 "/>
</g>
</g>
</g>
</g>
</g>
<g>
<polygon id="_239458056" class="fil1" points="66.8412,85.592 65.8423,80.2027 71.2316,79.2038 122.337,114.328 117.947,120.716 "/>
</g>
<g>
<polygon id="_239458128" class="fil1" points="161.983,65.2266 166.314,65.9125 165.628,70.2434 91.6291,124.007 87.9841,118.99 "/>
</g>
<g>
<g>
<path id="_239458080" class="fil2" d="M121.273 39.5827l0.9194 -0.597 0.597 0.9194 -4.6832 22.7785 -1.8197 -0.3868 4.9865 -22.7141zm-8.6079 39.3785l1.9713 0.419 -10.5894 52.4291 -3.0328 -0.6446 11.6509 -52.2035z"/>
<path id="_239458248" class="fil2" d="M117.358 61.7319c5.0113,1.0653 8.2298,6.0212 7.1646,11.0325 -1.0652,5.0114 -6.0212,8.2298 -11.0325,7.1646 -5.0113,-1.0651 -8.2296,-6.0211 -7.1644,-11.0324 1.0651,-5.0114 6.0211,-8.2298 11.0323,-7.1646l0 -0.0001zm-0.9669 4.5493c-2.5056,-0.5325 -4.9836,1.0767 -5.5162,3.5823 -0.5326,2.5057 1.0766,4.9837 3.5822,5.5163 2.5056,0.5325 4.9836,-1.0767 5.5162,-3.5823 0.5326,-2.5057 -1.0767,-4.9837 -3.5823,-5.5163l0.0001 0z"/>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
If I have understood your question correctly, you want to zoom into the clockface while the clockface always remains horizontally and vertically centered - is that correct?
If so, instead of using javascript, one alternative approach is to animate the clockface using the CSS scale transformation:
transform: scale([VALUE]) // a value of 1 represents normal size
Working Example:
#wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 180px;
height: 180px;
background-color: green;
overflow: hidden;
}
#clock1 {
position: absolute;
width: 180px;
height: 180px;
background-color:#fff;
animation: zoomClock 4s ease-out;
}
.fill0 {fill: white;}
.fill1 {fill: black;}
.fill2 {fill: #AA0000;}
#keyframes zoomClock {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
<div id="wrapper" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="clock1">
<g>
<g>
<circle class="fill0" cx="107.366" cy="108.741" r="79.375" />
<g>
<g>
<g>
<g>
<g>
<polygon class="fill1" />
<polygon class="fill1" />
<polygon class="fill1" />
<polygon class="fill1" />
</g>
<g>
<polygon class="fill1" points="151.673,45.1189 154.182,46.9414 149.626,53.2125 147.117,51.39 "/>
<polygon class="fill1" points="158.081,50.0988 160.385,52.1735 155.198,57.934 152.894,55.8593 "/>
<polygon class="fill1" points="163.933,55.7213 166.008,58.0255 160.247,63.2122 158.172,60.908 "/>
<polygon class="fill1" points="169.165,61.9246 170.988,64.433 164.716,68.9892 162.894,66.4808 "/>
</g>
<g>
<polygon class="fill1" points="177.548,75.7965 178.809,78.629 171.728,81.7818 170.467,78.9493 "/>
<polygon class="fill1" points="180.607,83.313 181.565,86.2618 174.193,88.6571 173.235,85.7083 "/>
<polygon class="fill1" points="182.864,91.1082 183.509,94.141 175.927,95.7526 175.282,92.7198 "/>
<polygon class="fill1" points="184.294,99.0965 184.618,102.18 176.909,102.99 176.585,99.9067 "/>
</g>
<polygon class="fill1" points="104.265,31.2262 110.466,31.2262 110.466,54.4806 104.265,54.4806 "/>
<polygon class="fill1" points="143.438,40.0609 148.808,43.1615 139.506,59.2726 134.136,56.172 "/>
<polygon class="fill1" points="172.945,67.2983 176.046,72.6687 159.935,81.9705 156.834,76.6001 "/>
</g>
</g>
<g>
<g>
<g>
<polygon class="fill1" points="184.618,115.302 184.294,118.385 176.585,117.575 176.909,114.491 "/>
<polygon class="fill1" points="183.509,123.341 182.864,126.373 175.282,124.762 175.927,121.729 "/>
<polygon class="fill1" points="181.565,131.22 180.607,134.168 173.235,131.773 174.193,128.824 "/>
<polygon class="fill1" points="178.809,138.853 177.548,141.685 170.467,138.532 171.728,135.7 "/>
</g>
<g>
<polygon class="fill1" points="170.988,153.049 169.165,155.557 162.894,151.001 164.716,148.492 "/>
<polygon class="fill1" points="166.008,159.456 163.933,161.76 158.172,156.574 160.247,154.269 "/>
<polygon class="fill1" points="160.385,165.308 158.081,167.383 152.894,161.622 155.198,159.548 "/>
<polygon class="fill1" points="154.182,170.54 151.673,172.363 147.117,166.092 149.626,164.269 "/>
</g>
<g>
<polygon class="fill1" points="140.31,178.923 137.477,180.185 134.325,173.103 137.157,171.842 "/>
<polygon class="fill1" points="132.793,181.983 129.845,182.941 127.449,175.569 130.398,174.61 "/>
<polygon class="fill1" points="124.998,184.239 121.965,184.884 120.354,177.302 123.387,176.657 "/>
<polygon class="fill1" points="117.01,185.669 113.926,185.993 113.116,178.284 116.2,177.96 "/>
</g>
<polygon class="fill1" points="184.88,105.64 184.88,111.841 161.626,111.841 161.626,105.64 "/>
<polygon class="fill1" points="176.046,144.813 172.945,150.183 156.834,140.881 159.934,135.511 "/>
<polygon class="fill1" points="148.808,174.32 143.438,177.421 134.136,161.31 139.506,158.209 "/>
</g>
</g>
<g>
<g>
<g>
<polygon class="fill1" points="100.805,185.993 97.7213,185.669 98.5315,177.96 101.615,178.284 "/>
<polygon class="fill1" points="92.7658,184.884 89.733,184.239 91.3446,176.657 94.3774,177.302 "/>
<polygon class="fill1" />
<polygon class="fill1" points="77.2538,180.185 74.4213,178.923 77.5741,171.842 80.4066,173.103 "/>
</g>
<g>
<polygon class="fill1" points="63.0578,172.363 60.5494,170.54 65.1056,164.269 67.614,166.092 "/>
<polygon class="fill1" points="56.6503,167.383 54.3461,165.308 59.5328,159.548 61.837,161.622 "/>
<polygon class="fill1" points="50.7983,161.76 48.7236,159.456 54.4841,154.269 56.5588,156.574 "/>
<polygon class="fill1" points="45.5662,155.557 43.7437,153.049 50.0148,148.492 51.8373,151.001 "/>
</g>
<g>
<polygon class="fill1" points="37.183,141.685 35.9219,138.853 43.0032,135.7 44.2643,138.532 "/>
<polygon class="fill1" points="34.1239,134.169 33.1658,131.22 40.5379,128.825 41.496,131.773 "/>
<polygon class="fill1" points="31.8672,126.373 31.2226,123.341 38.8047,121.729 39.4493,124.762 "/>
<polygon class="fill1" points="30.4376,118.385 30.1135,115.302 37.8225,114.491 38.1466,117.575 "/>
</g>
<polygon class="fill1" points="110.466,186.255 104.265,186.255 104.265,163.001 110.466,163.001 "/>
<polygon class="fill1" points="71.2935,177.421 65.9231,174.32 75.2249,158.209 80.5953,161.31 "/>
<polygon class="fill1" points="41.7862,150.183 38.6856,144.813 54.7967,135.511 57.8973,140.881 "/>
</g>
</g>
<g>
<g>
<g>
<polygon class="fill1" points="30.1135,102.18 30.4376,99.0965 38.1466,99.9067 37.8225,102.99 "/>
<polygon class="fill1" points="31.2225,94.141 31.8671,91.1082 39.4492,92.7198 38.8046,95.7526 "/>
<polygon class="fill1" points="33.1657,86.2619 34.1238,83.3131 41.4959,85.7084 40.5378,88.6572 "/>
<polygon class="fill1" points="35.9219,78.629 37.183,75.7965 44.2643,78.9493 43.0032,81.7818 "/>
</g>
<g>
<polygon class="fill1" points="43.7437,64.433 45.5662,61.9246 51.8373,66.4808 50.0148,68.9892 "/>
<polygon class="fill1" points="48.7236,58.0255 50.7983,55.7213 56.5588,60.908 54.4841,63.2122 "/>
<polygon class="fill1" points="54.3461,52.1735 56.6503,50.0988 61.837,55.8593 59.5328,57.934 "/>
<polygon class="fill1" points="60.5494,46.9414 63.0578,45.1189 67.614,51.39 65.1056,53.2125 "/>
</g>
<g>
<polygon class="fill1" points="74.4213,38.5582 77.2538,37.2971 80.4066,44.3784 77.5741,45.6395 "/>
<polygon class="fill1" points="81.9378,35.4991 84.8866,34.541 87.2819,41.9131 84.3331,42.8712 "/>
<polygon class="fill1" points="89.733,33.2424 92.7658,32.5978 94.3774,40.1799 91.3446,40.8245 "/>
<polygon class="fill1" points="97.7213,31.8128 100.805,31.4887 101.615,39.1977 98.5315,39.5218 "/>
</g>
<polygon class="fill1" points="29.851,111.841 29.851,105.64 53.1054,105.64 53.1054,111.841 "/>
<polygon class="fill1" points="38.6857,72.6687 41.7863,67.2983 57.8974,76.6001 54.7968,81.9705 "/>
<polygon class="fill1" points="65.9231,43.1614 71.2935,40.0608 80.5953,56.1719 75.2249,59.2725 "/>
</g>
</g>
</g>
</g>
<polygon class="fill1" points="66.8412,85.592 65.8423,80.2027 71.2316,79.2038 122.337,114.328 117.947,120.716 "/>
<polygon class="fill1" points="161.983,65.2266 166.314,65.9125 165.628,70.2434 91.6291,124.007 87.9841,118.99 "/>
<path class="fill2" d="M121.273 39.5827l0.9194 -0.597 0.597 0.9194 -4.6832 22.7785 -1.8197 -0.3868 4.9865 -22.7141zm-8.6079 39.3785l1.9713 0.419 -10.5894 52.4291 -3.0328 -0.6446 11.6509 -52.2035z"/>
<path class="fill2" d="M117.358 61.7319c5.0113,1.0653 8.2298,6.0212 7.1646,11.0325 -1.0652,5.0114 -6.0212,8.2298 -11.0325,7.1646 -5.0113,-1.0651 -8.2296,-6.0211 -7.1644,-11.0324 1.0651,-5.0114 6.0211,-8.2298 11.0323,-7.1646l0 -0.0001zm-0.9669 4.5493c-2.5056,-0.5325 -4.9836,1.0767 -5.5162,3.5823 -0.5326,2.5057 1.0766,4.9837 3.5822,5.5163 2.5056,0.5325 4.9836,-1.0767 5.5162,-3.5823 0.5326,-2.5057 -1.0767,-4.9837 -3.5823,-5.5163l0.0001 0z"/>
</g>
</g>
</svg>
</div>
Random Color to SVG rect
How can I make this possible? It's not working. I would like that the color of the rect changes after reload to one of the colors in the array.
This method isn't working. Can anybody help?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill: #ff0000;
}
.cls-2 {
fill: #fff;
}
</style>
</defs>
<title>Logo MC</title>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_1-2" data-name="Ebene 1">
<rect class="cls-1" width="72" height="72" />
<path class="cls-2" d="M12,20.41h4.62l7.61,13.17h.28l7.61-13.17h4.66V45.29H32.15V33l.28-4.17h-.28L25.83,40H23L16.65,28.85h-.28L16.65,33V45.29H12Z" />
<path class="cls-2" d="M63.22,41.29a12.21,12.21,0,0,1-4.34,3.39,13.84,13.84,0,0,1-10.76.16,13.18,13.18,0,0,1-6.86-17.12,12.54,12.54,0,0,1,6.86-6.86,13.15,13.15,0,0,1,5.16-1,11.75,11.75,0,0,1,9.32,4.07l-3.31,3.19a8.93,8.93,0,0,0-2.55-2.05,7.19,7.19,0,0,0-3.42-.76,8.68,8.68,0,0,0-3.27.61,7.82,7.82,0,0,0-2.66,1.72,8.17,8.17,0,0,0-1.79,2.69,9.77,9.77,0,0,0,0,7.06,8.17,8.17,0,0,0,1.79,2.69,8,8,0,0,0,2.66,1.72,8.88,8.88,0,0,0,3.27.61,7.92,7.92,0,0,0,3.7-.85,9.09,9.09,0,0,0,2.86-2.42Z" />
<path class="cls-2" d="M14,53.11h0a1.33,1.33,0,0,1-.14.19,1,1,0,0,1-.2.16,1.23,1.23,0,0,1-.26.12,1.65,1.65,0,0,1-.32,0,1,1,0,0,1-.45-.1,1,1,0,0,1-.36-.27,1.13,1.13,0,0,1-.25-.41,1.32,1.32,0,0,1-.1-.53,1.27,1.27,0,0,1,.1-.52,1.13,1.13,0,0,1,.25-.41,1,1,0,0,1,.36-.27A1,1,0,0,1,13,51a1.06,1.06,0,0,1,.58.15,1,1,0,0,1,.34.35h0l0-.34V50h.32v3.58H14Zm-.89.22a.8.8,0,0,0,.34-.07.69.69,0,0,0,.28-.2.87.87,0,0,0,.2-.32,1.14,1.14,0,0,0,.07-.43,1.18,1.18,0,0,0-.07-.43,1,1,0,0,0-.2-.32.77.77,0,0,0-.28-.19.8.8,0,0,0-.34-.07.83.83,0,0,0-.34.07.9.9,0,0,0-.28.2,1.16,1.16,0,0,0-.2.32,1.33,1.33,0,0,0,0,.85,1,1,0,0,0,.2.32.9.9,0,0,0,.28.2A.83.83,0,0,0,13.08,53.33Z" />
<path class="cls-2" d="M18.49,53a1.38,1.38,0,0,1-.17.25.93.93,0,0,1-.23.21,1.4,1.4,0,0,1-.3.15,1.52,1.52,0,0,1-.38,0,1.16,1.16,0,0,1-.49-.1.94.94,0,0,1-.38-.27,1.25,1.25,0,0,1-.26-.41,1.51,1.51,0,0,1-.09-.53,1.69,1.69,0,0,1,.08-.5,1.38,1.38,0,0,1,.24-.41,1.2,1.2,0,0,1,.38-.29,1.1,1.1,0,0,1,.49-.1,1.21,1.21,0,0,1,.48.09,1,1,0,0,1,.36.26,1.13,1.13,0,0,1,.23.4,1.46,1.46,0,0,1,.09.52v0a0,0,0,0,0,0,0v0h-2a1,1,0,0,0,.3.73.79.79,0,0,0,.29.17.89.89,0,0,0,.31.06.79.79,0,0,0,.49-.14,1.22,1.22,0,0,0,.3-.37Zm-.29-.86a.85.85,0,0,0-.05-.26.73.73,0,0,0-.14-.26.71.71,0,0,0-.25-.2.9.9,0,0,0-.39-.08,1,1,0,0,0-.29.05,1,1,0,0,0-.25.15.79.79,0,0,0-.19.25,1,1,0,0,0-.1.35Z" />
<path class="cls-2" d="M21.36,53.62a1.15,1.15,0,0,1-.37-.06,1.32,1.32,0,0,1-.29-.15,1.2,1.2,0,0,1-.22-.23.87.87,0,0,1-.14-.27l.28-.12a.92.92,0,0,0,.3.41.8.8,0,0,0,.44.13.75.75,0,0,0,.47-.13.38.38,0,0,0,.17-.3.37.37,0,0,0,0-.15.24.24,0,0,0-.09-.12.55.55,0,0,0-.17-.1l-.28-.09-.34-.08-.24-.08a.78.78,0,0,1-.22-.12,1,1,0,0,1-.17-.19.53.53,0,0,1-.06-.26.61.61,0,0,1,.08-.3.73.73,0,0,1,.21-.22,1,1,0,0,1,.3-.13,1.41,1.41,0,0,1,.35-.05,1,1,0,0,1,.3,0,1.08,1.08,0,0,1,.27.1,1.24,1.24,0,0,1,.22.18,1,1,0,0,1,.15.25l-.28.11a.63.63,0,0,0-.28-.3.81.81,0,0,0-.39-.1.78.78,0,0,0-.22,0l-.19.08a.44.44,0,0,0-.14.13.26.26,0,0,0-.05.17.25.25,0,0,0,.13.24,1.18,1.18,0,0,0,.37.15l.36.09a1.09,1.09,0,0,1,.55.27.58.58,0,0,1,.18.42.59.59,0,0,1-.07.29.72.72,0,0,1-.19.24,1,1,0,0,1-.31.16A1.14,1.14,0,0,1,21.36,53.62Z" />
<path class="cls-2" d="M24.41,50.45a.21.21,0,0,1-.17-.07.23.23,0,0,1-.08-.17.25.25,0,0,1,.08-.18.21.21,0,0,1,.17-.07.24.24,0,0,1,.18.07.29.29,0,0,1,.07.18.26.26,0,0,1-.07.17A.24.24,0,0,1,24.41,50.45Zm-.16,3.09V51.09h.32v2.45Z" />
<path class="cls-2" d="M27.71,54.7a1.09,1.09,0,0,1-.42-.07,1,1,0,0,1-.31-.16,1,1,0,0,1-.22-.23,1.49,1.49,0,0,1-.13-.25l.3-.12a.72.72,0,0,0,.29.39.84.84,0,0,0,.49.15.84.84,0,0,0,.67-.26,1,1,0,0,0,.22-.71v-.32h0a1.06,1.06,0,0,1-.35.35,1,1,0,0,1-.55.15,1,1,0,0,1-.45-.1,1,1,0,0,1-.36-.27,1.48,1.48,0,0,1-.35-.94,1.3,1.3,0,0,1,.1-.52,1.22,1.22,0,0,1,.25-.41,1,1,0,0,1,.36-.27,1,1,0,0,1,.45-.1,1,1,0,0,1,.55.15,1,1,0,0,1,.35.34h0v-.41h.31v2.37a1.45,1.45,0,0,1-.09.54,1,1,0,0,1-.26.39,1,1,0,0,1-.38.23A1.4,1.4,0,0,1,27.71,54.7Zm0-1.37a.8.8,0,0,0,.34-.07.76.76,0,0,0,.28-.2,1,1,0,0,0,.2-.31,1.2,1.2,0,0,0,.07-.44,1.18,1.18,0,0,0-.07-.43,1.16,1.16,0,0,0-.2-.32.87.87,0,0,0-.28-.19.8.8,0,0,0-.34-.07.78.78,0,0,0-.33.07,1,1,0,0,0-.47.52,1.08,1.08,0,0,0-.08.42,1.18,1.18,0,0,0,.08.43,1,1,0,0,0,.47.52A.78.78,0,0,0,27.72,53.33Z" />
<path class="cls-2" d="M31.31,51.55h0l.14-.21.2-.17a1,1,0,0,1,.25-.12.88.88,0,0,1,.29,0,.94.94,0,0,1,.39.07.78.78,0,0,1,.29.21.83.83,0,0,1,.16.31,1.29,1.29,0,0,1,.06.4v1.54h-.32V52.06a.81.81,0,0,0-.18-.58.64.64,0,0,0-.49-.18.72.72,0,0,0-.32.08.82.82,0,0,0-.25.21,1.08,1.08,0,0,0-.16.3,1,1,0,0,0-.06.35v1.3H31V51.09h.3Z" />
<path class="cls-2" d="M37.86,51.09h.3v.46h0a1.2,1.2,0,0,1,.13-.21,1.54,1.54,0,0,1,.19-.17,1.34,1.34,0,0,1,.24-.12A.78.78,0,0,1,39,51a.73.73,0,0,1,.5.16.84.84,0,0,1,.27.4,1.09,1.09,0,0,1,.34-.4.89.89,0,0,1,.54-.16.86.86,0,0,1,.38.07.75.75,0,0,1,.26.2.81.81,0,0,1,.15.31,1.6,1.6,0,0,1,.05.39v1.56h-.32V52a.93.93,0,0,0-.14-.55.54.54,0,0,0-.46-.19.61.61,0,0,0-.3.08.74.74,0,0,0-.23.2.85.85,0,0,0-.15.3,1,1,0,0,0-.06.34v1.32h-.32V52.05a.87.87,0,0,0-.14-.56.52.52,0,0,0-.45-.19.61.61,0,0,0-.3.08.69.69,0,0,0-.24.21.89.89,0,0,0-.15.31,1.49,1.49,0,0,0,0,.36v1.28h-.32Z" />
<path class="cls-2" d="M45.2,53.1h0a1,1,0,0,1-.35.37.88.88,0,0,1-.51.15,1.06,1.06,0,0,1-.37-.06,1,1,0,0,1-.3-.17.79.79,0,0,1-.19-.26.72.72,0,0,1-.07-.33.67.67,0,0,1,.08-.35.78.78,0,0,1,.22-.26A1.26,1.26,0,0,1,44,52a1.75,1.75,0,0,1,.4-.05,1.53,1.53,0,0,1,.45.06,1.33,1.33,0,0,1,.33.13V52a.73.73,0,0,0-.06-.3.63.63,0,0,0-.16-.23.7.7,0,0,0-.24-.15.87.87,0,0,0-.28-.05.85.85,0,0,0-.4.1.78.78,0,0,0-.29.28l-.28-.17a1,1,0,0,1,.39-.36,1.2,1.2,0,0,1,.57-.13,1.23,1.23,0,0,1,.44.07.93.93,0,0,1,.33.21.84.84,0,0,1,.22.31,1.07,1.07,0,0,1,.07.41v1.53H45.2Zm0-.65a1.66,1.66,0,0,0-.33-.15,1.2,1.2,0,0,0-.4-.06,1.36,1.36,0,0,0-.3,0,.9.9,0,0,0-.24.12.52.52,0,0,0-.16.17.5.5,0,0,0-.06.24.54.54,0,0,0,0,.22.57.57,0,0,0,.15.16.64.64,0,0,0,.2.11.85.85,0,0,0,.23,0,.71.71,0,0,0,.32-.07.77.77,0,0,0,.28-.19.92.92,0,0,0,.19-.28A.8.8,0,0,0,45.2,52.45Z" />
<path class="cls-2" d="M48.11,52.85a.43.43,0,0,0,.11.32.28.28,0,0,0,.24.11h.12l.12,0,.1.27a.49.49,0,0,1-.17.06l-.21,0a.64.64,0,0,1-.44-.17.6.6,0,0,1-.14-.2.85.85,0,0,1-.05-.3V51.38h-.44v-.29h.44v-.75h.32v.75h1.12v-.75h.32v.75h.61v.29h-.61v1.47a.43.43,0,0,0,.11.32.28.28,0,0,0,.24.11H50l.12,0,.1.27a.49.49,0,0,1-.17.06l-.21,0a.64.64,0,0,1-.44-.17.6.6,0,0,1-.14-.2.85.85,0,0,1-.05-.3V51.38H48.11Z" />
<path class="cls-2" d="M54.27,53a1.38,1.38,0,0,1-.17.25.93.93,0,0,1-.23.21,1.4,1.4,0,0,1-.3.15,1.52,1.52,0,0,1-.38,0,1.16,1.16,0,0,1-.49-.1,1.05,1.05,0,0,1-.39-.27,1.41,1.41,0,0,1-.25-.41,1.51,1.51,0,0,1-.09-.53,1.69,1.69,0,0,1,.08-.5,1.38,1.38,0,0,1,.24-.41,1.2,1.2,0,0,1,.38-.29,1.1,1.1,0,0,1,.49-.1,1.21,1.21,0,0,1,.48.09,1,1,0,0,1,.36.26,1.13,1.13,0,0,1,.23.4,1.46,1.46,0,0,1,.09.52v0a0,0,0,0,0,0,0v0h-2a1,1,0,0,0,.3.73.79.79,0,0,0,.29.17.89.89,0,0,0,.31.06.79.79,0,0,0,.49-.14,1.22,1.22,0,0,0,.3-.37ZM54,52.1a.85.85,0,0,0,0-.26.73.73,0,0,0-.14-.26.71.71,0,0,0-.25-.2.9.9,0,0,0-.39-.08,1,1,0,0,0-.29.05,1,1,0,0,0-.25.15.79.79,0,0,0-.19.25,1,1,0,0,0-.1.35Z" />
<path class="cls-2" d="M56.26,53.54V51.09h.3v.43h0a.78.78,0,0,1,.11-.2.9.9,0,0,1,.18-.16.7.7,0,0,1,.21-.11.51.51,0,0,1,.2,0l.19,0,.15,0-.1.29a.7.7,0,0,0-.28,0,.59.59,0,0,0-.25.07.68.68,0,0,0-.21.17.72.72,0,0,0-.14.26,1,1,0,0,0-.06.34v1.38Z" />
<path class="cls-2" d="M60.19,53.62a1,1,0,0,1-.36-.06,1,1,0,0,1-.52-.38.87.87,0,0,1-.14-.27l.28-.12a.92.92,0,0,0,.3.41.8.8,0,0,0,.44.13.75.75,0,0,0,.47-.13.38.38,0,0,0,.17-.3.37.37,0,0,0,0-.15.24.24,0,0,0-.09-.12.55.55,0,0,0-.17-.1l-.28-.09-.34-.08-.24-.08a.78.78,0,0,1-.22-.12,1,1,0,0,1-.17-.19.53.53,0,0,1-.06-.26.61.61,0,0,1,.08-.3.73.73,0,0,1,.21-.22,1,1,0,0,1,.3-.13,1.41,1.41,0,0,1,.35-.05,1,1,0,0,1,.3,0,1.08,1.08,0,0,1,.27.1,1.24,1.24,0,0,1,.22.18,1,1,0,0,1,.15.25l-.28.11a.67.67,0,0,0-.27-.3.88.88,0,0,0-.4-.1.78.78,0,0,0-.22,0l-.19.08a.58.58,0,0,0-.14.13.34.34,0,0,0,0,.17.25.25,0,0,0,.13.24,1.18,1.18,0,0,0,.37.15l.36.09a1.17,1.17,0,0,1,.56.27.61.61,0,0,1,.17.42.59.59,0,0,1-.07.29.61.61,0,0,1-.19.24.91.91,0,0,1-.31.16A1.14,1.14,0,0,1,60.19,53.62Z" />
</g>
</g>
<script type="text/javascript">
var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementsByClassName('cls-1').fill = random_color;
</script>
Try:
<script type="text/javascript">
var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementsByClassName('cls-1')[0].style.fill = random_color;
</script>
https://jsfiddle.net/ibowankenobi/knkg5gss/3/
In addition to ibowankenobi's answer:
You may want to loop through all your getElementsByClassName selections, in case you have more than one match:
var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
var myElements = document.getElementsByClassName('cls-1');
for(var i = 0; i < myElements.length; i++)
{
myElements[i].style.fill = random_color;
}
Full working example, with a color changing interval of 5 seconds:
function setColor(){
var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
var myElements = document.getElementsByClassName('cls-1');
for(var i = 0; i < myElements.length; i++)
{
myElements[i].style.fill = random_color;
}
}
setInterval(function(){
setColor();
}, 5000);
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill: #ff0000;
}
.cls-2 {
fill: #fff;
}
</style>
</defs>
<title>Logo MC</title>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_1-2" data-name="Ebene 1">
<rect class="cls-1" width="72" height="72" />
<path class="cls-2" d="M12,20.41h4.62l7.61,13.17h.28l7.61-13.17h4.66V45.29H32.15V33l.28-4.17h-.28L25.83,40H23L16.65,28.85h-.28L16.65,33V45.29H12Z" />
<path class="cls-2" d="M63.22,41.29a12.21,12.21,0,0,1-4.34,3.39,13.84,13.84,0,0,1-10.76.16,13.18,13.18,0,0,1-6.86-17.12,12.54,12.54,0,0,1,6.86-6.86,13.15,13.15,0,0,1,5.16-1,11.75,11.75,0,0,1,9.32,4.07l-3.31,3.19a8.93,8.93,0,0,0-2.55-2.05,7.19,7.19,0,0,0-3.42-.76,8.68,8.68,0,0,0-3.27.61,7.82,7.82,0,0,0-2.66,1.72,8.17,8.17,0,0,0-1.79,2.69,9.77,9.77,0,0,0,0,7.06,8.17,8.17,0,0,0,1.79,2.69,8,8,0,0,0,2.66,1.72,8.88,8.88,0,0,0,3.27.61,7.92,7.92,0,0,0,3.7-.85,9.09,9.09,0,0,0,2.86-2.42Z" />
<path class="cls-2" d="M14,53.11h0a1.33,1.33,0,0,1-.14.19,1,1,0,0,1-.2.16,1.23,1.23,0,0,1-.26.12,1.65,1.65,0,0,1-.32,0,1,1,0,0,1-.45-.1,1,1,0,0,1-.36-.27,1.13,1.13,0,0,1-.25-.41,1.32,1.32,0,0,1-.1-.53,1.27,1.27,0,0,1,.1-.52,1.13,1.13,0,0,1,.25-.41,1,1,0,0,1,.36-.27A1,1,0,0,1,13,51a1.06,1.06,0,0,1,.58.15,1,1,0,0,1,.34.35h0l0-.34V50h.32v3.58H14Zm-.89.22a.8.8,0,0,0,.34-.07.69.69,0,0,0,.28-.2.87.87,0,0,0,.2-.32,1.14,1.14,0,0,0,.07-.43,1.18,1.18,0,0,0-.07-.43,1,1,0,0,0-.2-.32.77.77,0,0,0-.28-.19.8.8,0,0,0-.34-.07.83.83,0,0,0-.34.07.9.9,0,0,0-.28.2,1.16,1.16,0,0,0-.2.32,1.33,1.33,0,0,0,0,.85,1,1,0,0,0,.2.32.9.9,0,0,0,.28.2A.83.83,0,0,0,13.08,53.33Z" />
<path class="cls-2" d="M18.49,53a1.38,1.38,0,0,1-.17.25.93.93,0,0,1-.23.21,1.4,1.4,0,0,1-.3.15,1.52,1.52,0,0,1-.38,0,1.16,1.16,0,0,1-.49-.1.94.94,0,0,1-.38-.27,1.25,1.25,0,0,1-.26-.41,1.51,1.51,0,0,1-.09-.53,1.69,1.69,0,0,1,.08-.5,1.38,1.38,0,0,1,.24-.41,1.2,1.2,0,0,1,.38-.29,1.1,1.1,0,0,1,.49-.1,1.21,1.21,0,0,1,.48.09,1,1,0,0,1,.36.26,1.13,1.13,0,0,1,.23.4,1.46,1.46,0,0,1,.09.52v0a0,0,0,0,0,0,0v0h-2a1,1,0,0,0,.3.73.79.79,0,0,0,.29.17.89.89,0,0,0,.31.06.79.79,0,0,0,.49-.14,1.22,1.22,0,0,0,.3-.37Zm-.29-.86a.85.85,0,0,0-.05-.26.73.73,0,0,0-.14-.26.71.71,0,0,0-.25-.2.9.9,0,0,0-.39-.08,1,1,0,0,0-.29.05,1,1,0,0,0-.25.15.79.79,0,0,0-.19.25,1,1,0,0,0-.1.35Z" />
<path class="cls-2" d="M21.36,53.62a1.15,1.15,0,0,1-.37-.06,1.32,1.32,0,0,1-.29-.15,1.2,1.2,0,0,1-.22-.23.87.87,0,0,1-.14-.27l.28-.12a.92.92,0,0,0,.3.41.8.8,0,0,0,.44.13.75.75,0,0,0,.47-.13.38.38,0,0,0,.17-.3.37.37,0,0,0,0-.15.24.24,0,0,0-.09-.12.55.55,0,0,0-.17-.1l-.28-.09-.34-.08-.24-.08a.78.78,0,0,1-.22-.12,1,1,0,0,1-.17-.19.53.53,0,0,1-.06-.26.61.61,0,0,1,.08-.3.73.73,0,0,1,.21-.22,1,1,0,0,1,.3-.13,1.41,1.41,0,0,1,.35-.05,1,1,0,0,1,.3,0,1.08,1.08,0,0,1,.27.1,1.24,1.24,0,0,1,.22.18,1,1,0,0,1,.15.25l-.28.11a.63.63,0,0,0-.28-.3.81.81,0,0,0-.39-.1.78.78,0,0,0-.22,0l-.19.08a.44.44,0,0,0-.14.13.26.26,0,0,0-.05.17.25.25,0,0,0,.13.24,1.18,1.18,0,0,0,.37.15l.36.09a1.09,1.09,0,0,1,.55.27.58.58,0,0,1,.18.42.59.59,0,0,1-.07.29.72.72,0,0,1-.19.24,1,1,0,0,1-.31.16A1.14,1.14,0,0,1,21.36,53.62Z" />
<path class="cls-2" d="M24.41,50.45a.21.21,0,0,1-.17-.07.23.23,0,0,1-.08-.17.25.25,0,0,1,.08-.18.21.21,0,0,1,.17-.07.24.24,0,0,1,.18.07.29.29,0,0,1,.07.18.26.26,0,0,1-.07.17A.24.24,0,0,1,24.41,50.45Zm-.16,3.09V51.09h.32v2.45Z" />
<path class="cls-2" d="M27.71,54.7a1.09,1.09,0,0,1-.42-.07,1,1,0,0,1-.31-.16,1,1,0,0,1-.22-.23,1.49,1.49,0,0,1-.13-.25l.3-.12a.72.72,0,0,0,.29.39.84.84,0,0,0,.49.15.84.84,0,0,0,.67-.26,1,1,0,0,0,.22-.71v-.32h0a1.06,1.06,0,0,1-.35.35,1,1,0,0,1-.55.15,1,1,0,0,1-.45-.1,1,1,0,0,1-.36-.27,1.48,1.48,0,0,1-.35-.94,1.3,1.3,0,0,1,.1-.52,1.22,1.22,0,0,1,.25-.41,1,1,0,0,1,.36-.27,1,1,0,0,1,.45-.1,1,1,0,0,1,.55.15,1,1,0,0,1,.35.34h0v-.41h.31v2.37a1.45,1.45,0,0,1-.09.54,1,1,0,0,1-.26.39,1,1,0,0,1-.38.23A1.4,1.4,0,0,1,27.71,54.7Zm0-1.37a.8.8,0,0,0,.34-.07.76.76,0,0,0,.28-.2,1,1,0,0,0,.2-.31,1.2,1.2,0,0,0,.07-.44,1.18,1.18,0,0,0-.07-.43,1.16,1.16,0,0,0-.2-.32.87.87,0,0,0-.28-.19.8.8,0,0,0-.34-.07.78.78,0,0,0-.33.07,1,1,0,0,0-.47.52,1.08,1.08,0,0,0-.08.42,1.18,1.18,0,0,0,.08.43,1,1,0,0,0,.47.52A.78.78,0,0,0,27.72,53.33Z" />
<path class="cls-2" d="M31.31,51.55h0l.14-.21.2-.17a1,1,0,0,1,.25-.12.88.88,0,0,1,.29,0,.94.94,0,0,1,.39.07.78.78,0,0,1,.29.21.83.83,0,0,1,.16.31,1.29,1.29,0,0,1,.06.4v1.54h-.32V52.06a.81.81,0,0,0-.18-.58.64.64,0,0,0-.49-.18.72.72,0,0,0-.32.08.82.82,0,0,0-.25.21,1.08,1.08,0,0,0-.16.3,1,1,0,0,0-.06.35v1.3H31V51.09h.3Z" />
<path class="cls-2" d="M37.86,51.09h.3v.46h0a1.2,1.2,0,0,1,.13-.21,1.54,1.54,0,0,1,.19-.17,1.34,1.34,0,0,1,.24-.12A.78.78,0,0,1,39,51a.73.73,0,0,1,.5.16.84.84,0,0,1,.27.4,1.09,1.09,0,0,1,.34-.4.89.89,0,0,1,.54-.16.86.86,0,0,1,.38.07.75.75,0,0,1,.26.2.81.81,0,0,1,.15.31,1.6,1.6,0,0,1,.05.39v1.56h-.32V52a.93.93,0,0,0-.14-.55.54.54,0,0,0-.46-.19.61.61,0,0,0-.3.08.74.74,0,0,0-.23.2.85.85,0,0,0-.15.3,1,1,0,0,0-.06.34v1.32h-.32V52.05a.87.87,0,0,0-.14-.56.52.52,0,0,0-.45-.19.61.61,0,0,0-.3.08.69.69,0,0,0-.24.21.89.89,0,0,0-.15.31,1.49,1.49,0,0,0,0,.36v1.28h-.32Z" />
<path class="cls-2" d="M45.2,53.1h0a1,1,0,0,1-.35.37.88.88,0,0,1-.51.15,1.06,1.06,0,0,1-.37-.06,1,1,0,0,1-.3-.17.79.79,0,0,1-.19-.26.72.72,0,0,1-.07-.33.67.67,0,0,1,.08-.35.78.78,0,0,1,.22-.26A1.26,1.26,0,0,1,44,52a1.75,1.75,0,0,1,.4-.05,1.53,1.53,0,0,1,.45.06,1.33,1.33,0,0,1,.33.13V52a.73.73,0,0,0-.06-.3.63.63,0,0,0-.16-.23.7.7,0,0,0-.24-.15.87.87,0,0,0-.28-.05.85.85,0,0,0-.4.1.78.78,0,0,0-.29.28l-.28-.17a1,1,0,0,1,.39-.36,1.2,1.2,0,0,1,.57-.13,1.23,1.23,0,0,1,.44.07.93.93,0,0,1,.33.21.84.84,0,0,1,.22.31,1.07,1.07,0,0,1,.07.41v1.53H45.2Zm0-.65a1.66,1.66,0,0,0-.33-.15,1.2,1.2,0,0,0-.4-.06,1.36,1.36,0,0,0-.3,0,.9.9,0,0,0-.24.12.52.52,0,0,0-.16.17.5.5,0,0,0-.06.24.54.54,0,0,0,0,.22.57.57,0,0,0,.15.16.64.64,0,0,0,.2.11.85.85,0,0,0,.23,0,.71.71,0,0,0,.32-.07.77.77,0,0,0,.28-.19.92.92,0,0,0,.19-.28A.8.8,0,0,0,45.2,52.45Z" />
<path class="cls-2" d="M48.11,52.85a.43.43,0,0,0,.11.32.28.28,0,0,0,.24.11h.12l.12,0,.1.27a.49.49,0,0,1-.17.06l-.21,0a.64.64,0,0,1-.44-.17.6.6,0,0,1-.14-.2.85.85,0,0,1-.05-.3V51.38h-.44v-.29h.44v-.75h.32v.75h1.12v-.75h.32v.75h.61v.29h-.61v1.47a.43.43,0,0,0,.11.32.28.28,0,0,0,.24.11H50l.12,0,.1.27a.49.49,0,0,1-.17.06l-.21,0a.64.64,0,0,1-.44-.17.6.6,0,0,1-.14-.2.85.85,0,0,1-.05-.3V51.38H48.11Z" />
<path class="cls-2" d="M54.27,53a1.38,1.38,0,0,1-.17.25.93.93,0,0,1-.23.21,1.4,1.4,0,0,1-.3.15,1.52,1.52,0,0,1-.38,0,1.16,1.16,0,0,1-.49-.1,1.05,1.05,0,0,1-.39-.27,1.41,1.41,0,0,1-.25-.41,1.51,1.51,0,0,1-.09-.53,1.69,1.69,0,0,1,.08-.5,1.38,1.38,0,0,1,.24-.41,1.2,1.2,0,0,1,.38-.29,1.1,1.1,0,0,1,.49-.1,1.21,1.21,0,0,1,.48.09,1,1,0,0,1,.36.26,1.13,1.13,0,0,1,.23.4,1.46,1.46,0,0,1,.09.52v0a0,0,0,0,0,0,0v0h-2a1,1,0,0,0,.3.73.79.79,0,0,0,.29.17.89.89,0,0,0,.31.06.79.79,0,0,0,.49-.14,1.22,1.22,0,0,0,.3-.37ZM54,52.1a.85.85,0,0,0,0-.26.73.73,0,0,0-.14-.26.71.71,0,0,0-.25-.2.9.9,0,0,0-.39-.08,1,1,0,0,0-.29.05,1,1,0,0,0-.25.15.79.79,0,0,0-.19.25,1,1,0,0,0-.1.35Z" />
<path class="cls-2" d="M56.26,53.54V51.09h.3v.43h0a.78.78,0,0,1,.11-.2.9.9,0,0,1,.18-.16.7.7,0,0,1,.21-.11.51.51,0,0,1,.2,0l.19,0,.15,0-.1.29a.7.7,0,0,0-.28,0,.59.59,0,0,0-.25.07.68.68,0,0,0-.21.17.72.72,0,0,0-.14.26,1,1,0,0,0-.06.34v1.38Z" />
<path class="cls-2" d="M60.19,53.62a1,1,0,0,1-.36-.06,1,1,0,0,1-.52-.38.87.87,0,0,1-.14-.27l.28-.12a.92.92,0,0,0,.3.41.8.8,0,0,0,.44.13.75.75,0,0,0,.47-.13.38.38,0,0,0,.17-.3.37.37,0,0,0,0-.15.24.24,0,0,0-.09-.12.55.55,0,0,0-.17-.1l-.28-.09-.34-.08-.24-.08a.78.78,0,0,1-.22-.12,1,1,0,0,1-.17-.19.53.53,0,0,1-.06-.26.61.61,0,0,1,.08-.3.73.73,0,0,1,.21-.22,1,1,0,0,1,.3-.13,1.41,1.41,0,0,1,.35-.05,1,1,0,0,1,.3,0,1.08,1.08,0,0,1,.27.1,1.24,1.24,0,0,1,.22.18,1,1,0,0,1,.15.25l-.28.11a.67.67,0,0,0-.27-.3.88.88,0,0,0-.4-.1.78.78,0,0,0-.22,0l-.19.08a.58.58,0,0,0-.14.13.34.34,0,0,0,0,.17.25.25,0,0,0,.13.24,1.18,1.18,0,0,0,.37.15l.36.09a1.17,1.17,0,0,1,.56.27.61.61,0,0,1,.17.42.59.59,0,0,1-.07.29.61.61,0,0,1-.19.24.91.91,0,0,1-.31.16A1.14,1.14,0,0,1,60.19,53.62Z" />
</g>
</g>
</svg>
Snap not loading svg on localhost
Snap is not loading my svg on localhost and it's driving me nuts. I have a basic server set up with Apache and PHP.
index.html and css, js and svg folders are inside C:\Apache24\htdocs
The code is as follows:
HTML file:
<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<svg class="map_canvas"></svg>
</body>
CSS file:
.map_canvas {
width: 600px;
height: 800px;
}
JS file:
var s = Snap($(".map_canvas")[0]);
var g = s.paper.g();
Snap.load("svg/map.svg", onLoadSvg);
function onLoadSvg(doc) {
g.add( doc );
g.add( s.paper.text(200, 200, "Hello World") );
}
svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="712.464px" height="899.955px" viewBox="0 0 712.464 899.955" enable-background="new 0 0 712.464 899.955"
xml:space="preserve">
<g id="Map">
<polyline id="_x3C_Large_x5F_Triangle_x3E_" fill="#4E4E4E" points="352.732,31.586 23.392,879.586 673.892,879.586 "/>
<polyline id="_x3C_Sm_x5F_Triangle_x3E_" fill="#4E4E4E" points="462.892,272.391 462.892,272.391 693.892,271.891
580.401,577.821 "/>
<polyline id="_x3C_Grass_x3E_" fill="#9FB718" points="389.79,715.391 472.392,602.391 569.059,602.391 605.21,697.967
521.392,815.345 417.555,815.344 389.79,780.891 389.79,715.391 "/>
<polygon id="_x3C_Tr7_x3E_" fill="#73850B" points="495.726,796.562 505.892,796.562 505.892,802.062 512.059,802.062
512.059,796.562 523.559,796.562 509.642,761.729 "/>
<polyline id="_x3C_Tr6_x3E_" fill="#73850B" points="545.729,593.209 533.059,624.058 543.059,624.058 542.892,629.891
547.893,629.891 547.975,624.055 558.482,624.055 545.729,593.209 "/>
<polygon id="_x3C_Tr5_x3E_" fill="#73850B" points="527.392,677.391 514.892,711.391 524.392,711.391 524.392,716.891
530.392,716.891 530.392,711.391 540.892,711.391 "/>
<polygon id="_x3C_Tr4_x3E_" fill="#73850B" points="505.726,659.893 495.726,685.726 504.059,685.726 504.059,690.059
508.393,690.059 508.393,685.726 516.059,685.726 "/>
<polygon id="_x3C_Tr3_x3E_" fill="#73850B" points="501.393,700.06 491.893,724.727 499.559,724.727 499.559,729.227
504.059,729.227 504.059,724.727 512.059,724.727 "/>
<polygon id="_x3C_Tr2_x3E_" fill="#73850B" points="410.726,748.394 421.559,748.394 421.559,754.061 426.893,754.061
426.893,748.394 438.226,748.394 424.476,713.727 "/>
<polygon id="_x3C_Tr1_x3E_" fill="#73850B" points="445.726,742.062 435.393,769.514 444.227,769.395 444.226,773.895
448.559,773.895 448.559,769.395 457.059,769.229 "/>
<polygon id="_x3C_Rd_x5F_7_x3E_" fill="#FFF167" points="467.631,272.38 536.892,367.557 639.225,367.557 639.287,271.992
650.287,271.992 650.225,367.557 658.402,367.557 654.801,377.266 650.225,377.266 650.225,389.602 639.559,418.354
639.559,377.391 536.892,377.266 516.892,413.224 511.892,399.891 524.642,377.141 503.162,377.141 499.475,367.557
524.642,367.557 471.479,294.679 462.892,272.391 "/>
<path id="_x3C_Rd_x5F_6_x3E_" fill="#FFF167" d="M536.559,794.105l11.016-15.427c0,0,0.016,67.879,0.016,68.879
s75.854-101.22,75.854-101.22l5.303,13.986l- 16.084,20.583l30.896,41.984l-8.917,7.151l-29.432-40.151l-24.984,34.333
l41.695,55.362h-14.333l-34.362-46.362l-33.667,46.362h-13.333l10.333-16.029v-67.333"/>
<polygon id="_x3C_Rd_x5F_5_x3E_" fill="#FFF167" points="351.56,623.558 351.56,733.894 389.79,733.894 389.79,746.338
351.56,746.338 351.56,811.558 340.227,811.558 340.227,642.225 "/>
<polygon id="_x3C_Rd_x5F_4_x3E_" fill="#FFF167" points="393.227,555.89 399.894,545.89 457.059,623.366 450.185,632.77 "/>
<polyline id="_x3C_Rd_x5F_3_x3E_" fill="#FFF167" points="134.227,811.558 147.892,812.534 147.892,589.266 158.621,589.33
262.894,740.223 269.227,729.227 205.561,638.89 295.561,638.89 295.561,628.223 198.561,628.223 171.894,589.33 279.667,589.33
295.561,609.89 295.561,590.89 191.007,448.002 186.12,460.587 270.553,577.821 140.54,577.948 135.408,591.161 "/>
<polygon id="_x3C_Rd_x5F_2_x3E_" fill="#FFF167" points="310.392,516.891 399.892,516.891 393.227,528.891 310.392,528.891 "/>
<polygon id="_x3C_Rd_x5F_1_x3E_" fill="#FFF167" points="295.561,381.391 216.877,381.391 212.371,392.994 295.561,392.994 "/>
<path id="_x3C_Lg_x5F_rd_x5F_top_x5F_curve_x3E_" fill="#D3D3D3" d="M423.499,838.141c0,0,0,0,0-13.75
s-11.107-12.833-11.107-12.833"/>
<path id="_x3C_Lg_x5F_rd_x5F_btm_x3E_" fill="#D3D3D3" d="M254.645,833.354H41.347l-5.213,13.424h354.343l-0.149,32.811
l12.815-0.003c0,0,0.107-20.771,0.107-33.398s-11.107-12.833-11.107- 12.833H258.31H254.645z"/>
<polygon fill="#D3D3D3" points="295.561,178.793 295.561,686.558 262.894,740.223 262.894,811.558 49.812,811.558 44.599,824.981
410.726,824.981 410.478,879.586 423.392,879.586 423.499,824.391 412.392,811.558 278.558,811.558 278.558,742.062
491.893,397.225 484.522,378.558 310.392,659.893 310.392,140.605 "/>
<circle id="_x3C_Roundabout_x5F_lg_x3E_" fill="#888888" cx="269.906" cy="830.043" r="28.209"/>
<circle id="_x3C_Roundabout_x5F_sm_x3E_" fill="#C5C5C5" cx="269.867" cy="830.107" r="15.901"/>
</g>
<g id="Locations">
<path id="_x3C_Viner_x5F_Gallery_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M281.199,341.615
c0,0-1.607,0-16.165,0c-8.927,0-16.165-7.237-16.165-16.165c0- 8.928,7.237-16.165,16.165-16.165
c8.928,0,16.165,7.237,16.165,16.165c0,3.792-1.306,7.278- 3.492,10.036L281.199,341.615z"/>
<polygon id="_x3C_Viner_x5F_Gallery_x5F_Tr_x3E_" fill="#4D4D4D" points="264.973,315.891 255.245,332.141 274.495,332.141 "/>
<path id="_x3C_Newhampton_x5F_Inn_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M606.625,419.271
c0,0-1.607,0-16.165,0c-8.927,0-16.165-7.236-16.165-16.165c0- 8.928,7.238-16.165,16.165-16.165
c8.928,0,16.165,7.237,16.165,16.165c0,3.792-1.306,7.278- 3.492,10.036L606.625,419.271z"/>
<polygon id="_x3C_Newhampton_x5F_Inn_x5F_Tr_x3E_" fill="#4D4D4D" points="590.398,393.546 580.67,409.796 599.92,409.796 "/>
<path id="_x3C_Royal_x5F_Oak_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M350.263,570.397
c0,0-1.607,0-16.165,0c-8.927,0-16.165-7.236-16.165-16.165c0- 8.928,7.238-16.164,16.165-16.164
c8.928,0,16.165,7.236,16.165,16.164c0,3.792-1.306,7.278- 3.492,10.036L350.263,570.397z"/>
<polygon id="_x3C_Royal_x5F_Oak_x5F_Tr_x3E_" fill="#4D4D4D" points="334.036,544.674 324.308,560.923 343.558,560.923 "/>
<path id="_x3C_West_x5F_Park_x5F_Cafe_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M480.411,682.168
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L480.411,682.168z"/>
<polygon id="_x3C_West_x5F_Park_x5F_Cafe_x5F_Tr_x3E_" fill="#4D4D4D" points="464.185,656.444 454.456,672.693 473.706,672.693
"/>
<path id="_x3C_Tap_x5F_and_x5F_Ale_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M263.41,620.494
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L263.41,620.494z"/>
<polygon id="_x3C_Tap_x5F_and_x5F_Ale_x5F_Tr_x3E_" fill="#4D4D4D" points="247.183,594.771 237.455,611.02 256.705,611.02 "/>
<path id="_x3C_Asylum_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M278.819,683.244
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L278.819,683.244z"/>
<polygon id="_x3C_Asylum_x5F_Tr_x3E_" fill="#4D4D4D" points="262.593,657.521 252.864,673.77 272.114,673.77 "/>
<path id="_x3C_Combermere_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M330.879,733.896
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L330.879,733.896z"/>
<polygon id="_x3C_Combermere_x5F_Tr_x3E_" fill="#4D4D4D" points="314.653,708.173 304.924,724.422 324.174,724.422 "/>
<path id="_x3C_Clarendon_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M320.356,785.627
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L320.356,785.627z"/>
<polygon id="_x3C_Clarendon_x5F_Tr_x3E_" fill="#4D4D4D" points="304.13,759.903 294.401,776.152 313.651,776.152 "/>
<path id="_x3C_Eagle_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke- miterlimit="10" d="M123.195,785.627
c0,0-1.607,0-16.164,0c-8.928,0-16.166-7.236-16.166-16.165c0- 8.928,7.238-16.164,16.166-16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L123.195,785.627z"/>
<polygon id="_x3C_Eagle_x5F_Tr_x3E_" fill="#4D4D4D" points="106.968,759.903 97.24,776.152 116.49,776.152 "/>
<path id="_x3C_NAC_x5F_Q_x3E_" fill="#FFFFFF" stroke="#FFFFFF" stroke- miterlimit="10" d="M627.174,845.438c0,0-1.607,0-16.164,0
c-8.928,0-16.166-7.236-16.166-16.165c0-8.928,7.238-16.164,16.166- 16.164s16.164,7.236,16.164,16.164
c0,3.792-1.305,7.278-3.492,10.036L627.174,845.438z"/>
<polygon id="_x3C_NAC_x5F_Tr_x3E_" fill="#4D4D4D" points="610.947,819.714 601.219,835.963 620.469,835.963 "/>
</g>
</svg>
Am I missing something important? Do I need node.js?
Usually I'd use <svg id="mySVG" .... and avoid jQuery if you're learning SnapSVG. Here's the simplest example, get it working and then replace myURL with your SVG. If your SVG doesn't work, it may be an Apache issue (you running from http://localhost, not directly off the HDD?)
var s = Snap("#svg");
var myURL = "https://upload.wikimedia.org/wikipedia/commons/f/f4/Penrose_triangle.svg";
Snap.load(myURL, function(frag) { // returns fragment
var my_g = s.g(); // create new group
my_g.append(frag); // append fragment
my_g.attr({id: 'penrose' }); // assign ID for easier access
my_g.add( s.paper.text(10, 20, "Hello Penrose") );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" width="300" height="300" ></svg>
Sidenote: Suggest you use the console window to test these JS code first.