スナップがローカルホストでsvgをロードしていません

スナップはローカルホスト上で私のsvgをロードしていないので、ナットを運転しています。 ApacheとPHPで基本的なサーバーをセットアップしました。スナップがローカルホストでsvgをロードしていません

index.htmlをとCSS、JSとSVGフォルダはCの内側にある：\ Apache24 \ htdocsには

コードは次のとおりです。

HTMLファイル：

<!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ファイル：

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

JSファイル：

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>

私は重要な何かが足りないのですか？ node.jsが必要ですか？

出典

2016-04-24 Davtho1983

通常、私は<svg id="mySVG" ....を使用し、SnapSVGを習得する場合はjQueryを避けてください。ここでは最も簡単な例があります。それを働かせて、myURLをあなたのSVGに置き換えてください。あなたのSVGが機能しない場合、それは（あなたがhttp://localhostから、直接ではなくHDDオフ実行している？）Apacheの問題になることがあり

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>

追記：あなたがテストにコンソールウィンドウを使用して提案しますこれらのJSコードが最初です。

出典

2016-04-24 19:49:31

こんにちは私はそれを試しました - それはApacheの問題のようです - どのように私はApache5.7でjsを構成するか分からない？ – Davtho1983

ウィンドウのコンソールを開き、 'f5'でリロードし、 'network'タブでエラーを調べます。それ以外の場合は、node.jsまたはnginxを試してみてください。 –

私はnode.jsをいくつかの段階で試してみます - 私はあなたのソリューションで今作っています - ただ本体にスクリプトタグを置くだけです！ – Davtho1983

スナップがローカルホストでsvgをロードしていません

答えて

関連する問題