I'm working on a SVG animation, and i'm trying to add a Red-Circle and a Green-Circle to the front of the printer.
When you inspect my code you can see that #red-light, and #green-light are showing in the DOM, but it's not visible.
Does anybody know why they are both not showing as visisble?
https://codepen.io/stinkytofu3311/pen/VbYjNK
<div class="svg-wrapper">
<div class="svg-container">
<svg viewBox="0 0 356 356" style="border:solid 0px black" preserveAspectRatio="xMinYMin meet" class="svg-content">
<defs>
<path d="M3.26 0.75C2 0.75 0.98 1.78 0.98 3.04L0.98 5.32 114.7 5.32 114.7 3.04C114.7 1.77 113.68 0.75 112.42 0.75L3.26 0.75Z" id="path-1"/>
<path d="M65.84 0.05L0.53 0.05C0.53 0.05 29.77 15.29 65.84 15.29 101.91 15.29 131.76 0.05 131.76 0.05L65.84 0.05Z" id="path-3"/>
</defs>
<!-- Background Circle -->
<g id="background">
<g id="bg-circle" transform="translate(-47.000000, -145.000000)">
<path class="bg-circle-color" d="M225,500.6c98.3,0,178-79.4,178-177.3S323.2,146,225,146S47,225.4,47,323.3S126.7,500.6,225,500.6z"/>
</g>
</g>
<!-- Printer Front-Bottom -->
<g id="front-bottom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 222.000000)">
<path d="M203.21 1.36C203.21 1.36 203.21 7.23 203.21 7.23 203.21 10.57 200.49 13.27 197.17 13.27L6.45 13.27C3.11 13.27 0.41 10.57 0.41 7.22L0.41 1.3C0.41 0.58 203.21 3.39 203.21 1.36Z" id="Front-Panel-Bottom" fill="#E7E7E7"/>
<path d="M158.7 0.32L158.7 2.61C158.7 3.87 157.69 4.89 156.42 4.89L47.26 4.89C46 4.89 44.98 3.88 44.98 2.61L44.98 0.32 158.7 0.32Z" id="Front-Hole-Bottom" fill="#8F8E8E"/>
</g>
<!-- Printer Top-Panel -->
<g id="top-panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(85.000000, 114.000000)">
<polygon fill="#F9F9F9" points="0.33 18 0.33 17.91 6.85 0.31 179.92 0.01 186.15 17.91 186.15 18"/>
<path d="M45.19 14.89C45.44 14.4 46.1 14 46.64 14L137.48 14C138.03 14 138.68 14.41 138.92 14.89L140.54 18.11 44.65 17.86C44.1 17.86 43.86 17.46 44.12 16.96L45.19 14.89Z" id="Top-Feed-1" fill="#B9B9B9"/>
</g>
<!-- File -->
<g id="filewrapper">
<g id="file" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(133.000000, 55.000000)">
<polyline id="Paper-Body" fill="#F6A623" points="0.12 0 72.17 0 86.12 14.41 86.12 92.54 0.24 92.54"/>
<polygon id="Paper-Top-Right-Fold" fill="#AA7216" points="70.88 0 70.88 15.83 86.84 15.83"/>
<text id="AI-Text" font-family="MyriadPro-Bold, Myriad Pro" font-size="49.52" font-weight="bold" letter-spacing="-1.57" fill="#FFFFFF">
<tspan x="20.82" y="63.66">
Ai
</tspan>
</text>
</g>
<!-- File- Tag -->
<g id="file-tag-group" transform="translate(70.000000, 40.000000)">
<g id="background-color">
<defs><rect id="SVGID_1_" x="-80" y="-35.9" width="496" height="363"/></defs><defs>
<path id="SVGID_2_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/>
</defs>
<defs>
<path id="SVGID_3_" d="M8.5 0h89.4v68.9H8.5V0zM30.5 27c0-2.8 2.2-5 5-5h35.4c2.8 0 5 2.2 5 5v14.9c0 2.8-2.2 5-5 5H35.5c-2.8 0-5-2.2-5-5V27L30.5 27zM28.5 27v14.9c0 3.9 3.1 7 7 7h35.4c3.9 0 7-3.1 7-7V27c0-3.9-3.1-7-7-7H35.5C31.6 20 28.5 23.1 28.5 27L28.5 27z"/>
</defs>
<clipPath id="SVGID_4_"><use xlink:href="#SVGID_1_"/></clipPath>
<clipPath id="SVGID_5_" class="sta"><use xlink:href="#SVGID_2_"/></clipPath>
<clipPath id="SVGID_6_" class="stb"><use xlink:href="#SVGID_3_"/></clipPath>
<path class="stc" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g><g id="stroke">
<defs>
<rect id="SVGID_7_" x="-80" y="-35.9" width="496" height="363"/></defs>
<defs>
<path id="SVGID_8_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/>
</defs>
<clipPath id="SVGID_9_"><use xlink:href="#SVGID_7_"/></clipPath>
<clipPath id="SVGID_10_" class="std"><use xlink:href="#SVGID_8_"/></clipPath>
<path class="ste" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g>
<path id="file-text" class="stf" d="M41.6 33.9h1.3v7h2.3v-7H47v-1.8h-1.7v-0.6c0-0.4 0.1-0.7 0.2-0.9 0.1-0.2 0.4-0.2 0.7-0.2 0.3 0 0.7 0 1.1 0.1l0.3-1.6c-0.6-0.2-1.3-0.3-1.9-0.3 -0.6 0-1.2 0.1-1.6 0.3 -0.4 0.2-0.7 0.5-0.9 0.9s-0.2 0.9-0.2 1.7v0.7h-1.3V33.9L41.6 33.9zM50.5 30.9v-2.2h-2.3v2.2H50.5L50.5 30.9zM50.5 40.9v-8.8h-2.3v8.8H50.5L50.5 40.9zM55 40.9V28.8h-2.3v12.1H55L55 40.9zM61.8 39.1c-0.2 0.2-0.6 0.3-0.9 0.3 -0.5 0-1-0.2-1.3-0.6 -0.4-0.4-0.5-0.9-0.6-1.6h5.8c0-1.8-0.3-3.1-1.1-4 -0.8-0.9-1.8-1.3-3.1-1.3 -1.2 0-2.1 0.4-2.9 1.2 -0.8 0.8-1.1 2-1.1 3.4 0 1.2 0.3 2.2 0.9 3 0.7 1 1.9 1.5 3.4 1.5 1 0 1.8-0.2 2.4-0.7 0.6-0.4 1.1-1.1 1.4-1.9l-2.3-0.4C62.2 38.5 62.1 38.9 61.8 39.1L61.8 39.1zM59 35.8c0-0.6 0.2-1.1 0.5-1.5 0.3-0.4 0.8-0.6 1.3-0.6 0.5 0 0.9 0.2 1.2 0.5 0.3 0.4 0.5 0.9 0.5 1.5H59L59 35.8z"/>
</g>
</g>
<!-- Printer Paper -->
<g id="printer-paper" transform="translate(100.000000, 115.000000)">
<g id="end_3_">
<g id="end"> <!-- Printer Paper End Graphic -->
<polygon id="paper-base_1_" class="st0 start1" points="147.8,107.5 7.8,107.5 29.3,25.5 126.3,25.5 "/>
<polygon class="st1 start2" points="139.5,103.2 16,103.2 19.8,87.1 135.7,87.1 "/>
<polygon class="st1 start3" points="74.8,82.9 20.8,82.9 24,69.1 75,69.1 "/>
<polygon class="st1 start4" points="134.7,82.9 80.7,82.9 80.6,77.8 133.5,77.8 "/>
<polygon class="st1 start5" points="75.1,65.1 25,65.1 27.7,53.3 75.2,53.3 "/>
<polygon class="st1 start6" points="124.6,39.8 30.9,39.8 33.5,28.7 122,28.7 "/>
<polygon class="st1 start7" points="132.8,73.9 80.7,73.9 80.7,69.1 131.7,69.1 "/>
<polygon class="st1 start8" points="130.6,65.4 80.4,65.4 80.4,61 129.6,61 "/>
<polygon class="st1 start9" points="128.7,57.1 80.3,57.1 80.3,53 127.7,53 "/>
<polygon class="st1 start10" points="127,49.8 80.3,49.8 80.2,46 126.1,46 "/>
</g>
</g>
<g id="start"> <!-- Printer Paper Start Graphic -->
<g id="start_1_">
<rect id="paper-base" x="29.3" y="25.4" class="st0 end1" width="97" height="82"/>
<rect x="34.3" y="92.1" class="st1 end2" width="86.9" height="12.3"/>
<rect x="34.3" y="76.4" class="st1 end3" width="41.3" height="12.3"/>
<rect x="80" y="84.2" class="st1 end4" width="41.3" height="4.4"/>
<rect x="34.3" y="60.3" class="st1 end5" width="41.3" height="12.3"/>
<rect x="34.3" y="29.9" class="st1 end6" width="86.9" height="14.6"/>
<rect x="80.1" y="76.4" class="st1 end7" width="41.3" height="4.4"/>
<rect x="80" y="68.4" class="st1 end8" width="41.3" height="4.4"/>
<rect x="80" y="60" class="st1 end9" width="41.3" height="4.4"/>
<rect x="80" y="52.1" class="st1 end10" width="41.3" height="4.4"/>
</g>
</g>
</g>
<!-- Printer Body -->
<g id="Printer-Body" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 130.000000)">
<polygon id="Front-Fill" fill="#E7E7E7" points="0.41 24.29 0.41 83.57 0.41 94 203.21 94 203.21 83.62 203.21 24.29"/>
<g id="Bottom-Feed" transform="translate(44.000000, 89.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<polygon id="Fill-2" fill="#8E8E8E" mask="url(#mask-2)" points="-4.02 10.32 119.7 10.32 119.7 -4.25 -4.02 -4.25"/>
</g>
<g id="Fronot-Decor" transform="translate(36.000000, 24.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"/>
</mask>
<g id="Front-Decor"/>
<polygon id="Fill-5" fill="#A7A6A6" mask="url(#mask-4)" points="-4.47 20.29 136.76 20.29 136.76 -4.95 -4.47 -4.95"/>
</g>
<polygon id="Top" fill="#F9F9F9" points="9.33 0.91 0.67 24.3 203.47 24.8 195.16 0.91"/>
<polygon id="Vent-3" fill="#FFFFFF" points="7.29 37.24 29.47 37.24 29.47 31.91 7.29 31.91"/>
<polygon id="Vent-2" fill="#FFFFFF" points="7.29 44.09 29.47 44.09 29.47 38.76 7.29 38.76"/>
<polygon id="Vent-1" fill="#FFFFFF" points="7.29 50.95 29.47 50.95 29.47 45.62 7.29 45.62"/>
</g>
<!-- Red Light -->
<g id="red-light" transform="translate(90.000000, 70.000000)">
<defs>
<rect id="SVGID_1_" x="-247.7" y="-163.5" width="496" height="363"/></defs>
<defs>
<path id="SVGID_2_" d="M18.6 22.1c1.4 0 2.5-1.2 2.5-2.6 0-1.5-1.1-2.6-2.5-2.6 -1.4 0-2.5 1.2-2.5 2.6C16 20.9 17.2 22.1 18.6 22.1L18.6 22.1z"/>
</defs>
<clipPath id="SVGID_3_"><use xlink:href="#SVGID_1_"/></clipPath>
<clipPath id="SVGID_4_" class="sth"><use xlink:href="#SVGID_2_"/></clipPath>
<rect x="11" y="11.8" class="sti" width="15.1" height="15.3"/>
</g>
<!-- Green Light -->
<g id="green-light">
<defs>
<rect id="SVGID_1_" x="-248" y="-152.4" width="496" height="363"/>
</defs>
<defs>
<path id="SVGID_2_" d="M18.7,25.6c2,0,3.7-1.7,3.7-3.8c0-2.1-1.6-3.8-3.7-3.8c-2,0-3.7,1.7-3.7,3.8C15,23.9,16.6,25.6,18.7,25.6
L18.7,25.6z"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/>
</clipPath>
<clipPath id="SVGID_4_" class="stk">
<use xlink:href="#SVGID_2_" style="overflow:visible;"/>
</clipPath>
<rect x="10" y="13" class="stl" width="17.3" height="17.6"/>
</g>
<!-- Tap Panel that covers paper -->
<g id="Top-Panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(128.000000, 130.000000)">
<path d="M1.53 0.89C1.79 0.4 2.45 0 2.99 0L93.82 0C94.37 0 95.02 0.41 95.26 0.89L96.88 4.11 0.99 3.86C0.44 3.86 0.21 3.46 0.46 2.96L1.53 0.89Z" id="Top-Feed-1" fill="#B9B9B9" transform="translate(48.440524, 2.053393) scale(1, -1) translate(-48.440524, -2.053393) "/>
</g>
</svg>
</svg>
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.
Well, basically I have a SVG file which coordinates are calculated taking into account the screen resolution. Nonetheless, I have now a process that sends the SVG to another computer and adjusts each object to the resolution of the receiving computer. For that, I use the transformation matrix as you can see in object "OjeB0J0NzcPolyline1507". Everything went well, until now that I have to deal with masks.
Basically, the mask crops the SVG like if the mask was applied before the transformation and since the mask has a specific size, everything that is outside the mask is cropped. Nonetheless, I have already tried to make the svgjsRubberRect bigger and anything seems to work.
Is there any way to adjust the mask so the whole object is shown with exception to what is covered by the element"OjeB0J0NzcPath1519"
EDIT:
Original SVG:
<g id="canvas">
<polyline fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" > </use>
</mask>
</defs>
</svg>
Scaled SVG:
<svg id="zxjzF2hIO8Svg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">
<polyline transform="matrix(0.312592 0 0 0.462912 0 0)" fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable" transform="matrix(0.312592 0 0 0.462912 0 0)"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" transform="matrix(3.19906 0 0 2.16024 0 0)"> </use>
</mask>
</defs>
</svg>