1. Zuhause
  2. Frage und Antwort
  3. Snap lädt nicht svg auf localhost

Snap lädt nicht svg auf localhost

2016-04-24 11 views
0

Snap lädt nicht meine Svg auf localhost und es macht mich verrückt. Ich habe einen Basisserver mit Apache und PHP eingerichtet.Snap lädt nicht svg auf localhost

index.html und css, js und svg Ordner sind innerhalb von C: \ Apache24 \ htdocs

Der Code ist wie folgt:

HTML-Datei:

<!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-Datei:

.map_canvas { 
width: 600px; 
height: 800px; 
}

JS-Datei:

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>

Fehle ich etwas Wichtiges? Brauche ich node.js?

Quelle

2016-04-24 Davtho1983

Antwort

1

Normalerweise würde ich <svg id="mySVG" .... verwenden und jQuery vermeiden, wenn Sie SnapSVG lernen. Hier ist das einfachste Beispiel, es funktioniert und dann ersetzen myURL mit Ihrem SVG. Wenn Ihr SVG nicht funktioniert, kann es ein Apache-Problem (Sie von http://localhost ausgeführt wird, nicht direkt von der Festplatte?) Sein

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>

Nebenbei bemerkt: Schlagen Sie das Konsolenfenster verwenden, um zu testen diese JS-Code zuerst.

Quelle

2016-04-24 19:49:31

+0

Hey ich habe das versucht - es sieht aus wie ein Apache-Problem - nicht sicher, wie ich js auf Apache5.7 konfigurieren? – Davtho1983

+0

Öffnen Sie die Fensterkonsole, und laden Sie sie mit 'f5' neu. Suchen Sie im Register" Netzwerk "nach Fehlern. Wenn alles andere fehlschlägt, versuchen Sie node.js oder nginx. –

+0

Ok, ich werde node.js irgendwann ausprobieren - ich habe es jetzt mit Ihrer Lösung arbeiten lassen - indem ich das Script-Tag in den Körper eingefügt habe! – Davtho1983

Verwandte Themen

 Verwandte Themen