javascript - HTML - SVG 文件动画不适用于主机，但适用于本地？

Question

我有一个“轮盘赌”svg 文件，但它什么也没做。如果我在 localhost 上尝试，一切都运行良好!在托管上，就像“图片”一样无所事事。问题是，我该如何解决？

.svg文件代码:http://pastebin.com/dsyD3vft

容器:

<div class="wheel_container col s6" style="padding: none;">
<object type="image/svg+xml" data="wheel.svg" class="wheel" id="wheel">Your browser does not support SVG</object>
</div>

CSS:

.wheel {
width:100%;
z-index: 0;
display:block;
}

Javascript:

$("object").load(function() {
wheelSVG = $("object").contents().find("svg");
spinner = spinner.add(wheelSVG.find("#spin"));
center = wheelSVG.find("#ui ellipse");
centerText = wheelSVG.find("#number");
clearInterval(beforeLoginSpinInterval);
if(!loggedinn) {
    beforeLoginSpinInterval = setInterval(function() {
      currentRotation += 0.25;
      spinner.css("transform", 'rotate('+currentRotation+'deg)');
    }, 20);
  }
});

旋转

<g xmlns="http://www.w3.org/2000/svg" id="spin">
<g>
    <g>
        <path class="st1" d="M432.3,38.5c-34.2,7.3-68.1,18.3-101.3,33.1s-64,32.7-92.3,53.1l72.2,99.4l-0.4,0.3     c21.6-15.7,45.1-29.3,70.5-40.6c25.3-11.3,51.2-19.6,77.3-25.2l-0.5,0.1L432.3,38.5z"/>
    </g>
    <text transform="matrix(0.9136 -0.4067 0.4067 0.9135 322.6442 175.6196)" class="st0 st2 st3">14</text>
</g>
<g>
    <g>
        <path class="st4" d="M237.9,125.3c-28.2,20.6-54.8,44.4-79.1,71.4s-45.2,55.9-62.7,86.1l106.4,61.4l-0.2,0.4     c13.4-23.1,29.3-45.1,47.9-65.8s38.8-38.8,60.4-54.5l-0.4,0.3L237.9,125.3z"/>
    </g>
    <text transform="matrix(0.6691 -0.7431 0.7431 0.6691 210.1937 276.5912)" class="st0 st2 st5">7</text>
</g>
<g>
    <g>
        <path class="st1" d="M95.6,283.6c-17.4,30.3-32,62.8-43.2,97.4s-18.6,69.4-22.3,104.2l122.2,12.8l-0.1,0.5     c2.8-26.5,8.4-53.2,17-79.5c8.6-26.4,19.7-51.2,33-74.3l-0.2,0.4L95.6,283.6z"/>
    </g>
    <text transform="matrix(0.309 -0.951 0.9511 0.309 124.1028 456.9215)" class="st0 st2 st6">13</text>
</g>
<g>
    <g>
        <path class="st4" d="M30,486.2c-3.6,34.8-3.6,70.4,0.2,106.5s11.3,71,22,104.2L169,659l0.2,0.5c-8.2-25.4-13.9-52-16.8-79.6     s-2.8-54.8-0.1-81.3l-0.1,0.5L30,486.2z"/>
    </g>
    <text transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 123.8907 608.0349)" class="st0 st2 st7">6</text>
</g>
<g>
    <g>
        <path class="st1" d="M52.4,697.9c10.9,33.2,25.3,65.8,43.5,97.3c18.2,31.5,39.2,60.3,62.5,86.3l91.3-82.2l0.3,0.4     c-17.8-19.8-33.9-41.8-47.7-65.9s-24.9-48.9-33.2-74.3l0.2,0.5L52.4,697.9z"/>
    </g>
    <text transform="matrix(-0.5 -0.866 0.866 -0.5 200.3061 792.6865)" class="st0 st2 st8">12</text>
</g>
<g>
    <g>
        <path class="st4" d="M159.1,882.2c23.4,25.9,49.9,49.8,79.3,71.2c29.4,21.4,60.3,39.1,92.2,53.4l50-112.3l0.4,0.2     c-24.4-10.9-48-24.4-70.4-40.7c-22.4-16.3-42.6-34.6-60.5-54.4l0.3,0.4L159.1,882.2z"/>
    </g>
    <text transform="matrix(-0.809 -0.5878 0.5878 -0.809 312.469 893.9415)" class="st0 st2 st9">5</text>
</g>
<g>
    <g>
        <path class="st1" d="M331.5,1007.2c31.9,14.1,65.8,25.2,101.4,32.8s71,11.2,105.9,11.3V928.4h0.5c-26.7,0-53.8-2.8-80.9-8.6     c-27.1-5.8-53-14.2-77.4-25.1l0.4,0.2L331.5,1007.2z"/>
    </g>
    <text transform="matrix(-0.9782 -0.2079 0.2079 -0.9781 500.8162 960.7355)" class="st0 st2 st10">11</text>
</g>
<g>
    <g>
        <path class="st4" d="M539.8,1051.3c34.9-0.1,70.4-3.7,105.9-11.3s69.4-18.6,101.4-32.8l-50-112.3l0.4-0.2     c-24.4,10.8-50.3,19.3-77.4,25.1c-27.1,5.8-54.2,8.6-80.9,8.6h0.5V1051.3z"/>
    </g>
    <text transform="matrix(-0.9782 0.2079 -0.2079 -0.9781 651.1284 945.1309)" class="st0 st2 st10">4</text>
</g>
<g>
    <g>
        <path class="st1" d="M748,1006.8c31.9-14.3,62.8-32,92.2-53.4c29.4-21.4,55.8-45.3,79.3-71.2L828.2,800l0.3-0.4     c-17.9,19.8-38.1,38.1-60.5,54.4c-22.4,16.3-46,29.9-70.4,40.7l0.4-0.2L748,1006.8z"/>
    </g>
    <text transform="matrix(-0.809 0.5878 -0.5878 -0.809 826.7827 849.8548)" class="st0 st2 st9">10</text>
</g>
<g>
    <g>
        <path class="st4" d="M920.2,881.5c23.3-26,44.3-54.8,62.5-86.3c18.2-31.5,32.6-64.1,43.5-97.3l-116.9-38l0.2-0.5     c-8.3,25.4-19.3,50.3-33.2,74.3s-29.9,46-47.7,65.9l0.3-0.4L920.2,881.5z"/>
    </g>
    <text transform="matrix(-0.5 0.866 -0.866 -0.5 915.7706 727.7227)" class="st0 st2 st8">3</text>
</g>
<g>
    <g>
        <path class="st1" d="M1026.4,697c10.7-33.3,18.2-68.1,22-104.2c3.8-36.1,3.7-71.8,0.2-106.5L926.4,499l-0.1-0.5     c2.8,26.5,2.8,53.8-0.1,81.3s-8.6,54.2-16.8,79.6l0.2-0.5L1026.4,697z"/>
    </g>
    <text transform="matrix(-0.1045 0.9945 -0.9945 -0.1045 959.8926 558.2834)" class="st0 st2 st7">9</text>
</g>
<g>
    <g>
        <path class="st4" d="M1048.5,485.2c-3.7-34.7-11.1-69.6-22.3-104.2c-11.2-34.6-25.8-67.1-43.2-97.4l-106.4,61.4l-0.2-0.4     c13.3,23.1,24.4,48,33,74.3c8.6,26.4,14.2,53,17,79.5l-0.1-0.5L1048.5,485.2z"/>
    </g>
    <text transform="matrix(0.309 0.951 -0.9511 0.309 931.2808 385.5747)" class="st0 st2 st6">2</text>
</g>
<g>
    <path class="st1" d="M982.5,282.8c-17.5-30.2-38.4-59.1-62.7-86.1s-50.8-50.8-79.1-71.4l-72.2,99.4l-0.4-0.3    c21.6,15.7,41.8,33.9,60.4,54.5s34.5,42.7,47.9,65.8l-0.2-0.4L982.5,282.8z"/>
    <text transform="matrix(0.6691 0.7431 -0.7431 0.6691 834.8956 239.4054)" class="st0 st2 st5">8</text>
</g>
<g>
    <g>
        <path class="st4" d="M839.9,124.7c-28.3-20.5-59.2-38.4-92.3-53.1s-67.1-25.7-101.3-33.1l-25.5,120.2l-0.5-0.1     c26.1,5.6,52,13.9,77.3,25.2s48.9,24.9,70.5,40.6l-0.4-0.3L839.9,124.7z"/>
    </g>
    <text transform="matrix(0.9136 0.4067 -0.4067 0.9135 687.3855 145.1121)" class="st0 st2 st3">1</text>
</g>
<g>
    <path class="st11" d="M645.3,38.3c-34.2-7.2-69.6-11-106-11c-36.3,0-71.8,3.8-106,11l25.5,120.2l-0.5,0.1    c26.1-5.5,53.2-8.4,80.9-8.4c27.7,0,54.8,2.9,80.9,8.4l-0.5-0.1L645.3,38.3z"/>
    <text transform="matrix(1 0 0 1 514.27 118.9369)" class="st0 st2 st12">0</text>
</g>

Answer 1

如果您的代码在本地主机上正常工作，但现在它在服务器上不起作用，我建议您检查您的网络托管服务商是否支持 SVG 文件以及是否添加了 mime 类型。

此外，您可以将整个 svg 代码嵌入到您的 html 中，从而节省对服务器的另一次调用，并消除网络服务器是否支持 svg 的疑问。

您还应该将文件保存为压缩的 SVG 而不是标准的 illustrator svg