未在iPad上显示SVG元素

我试图使用HTML5和内联svg标记绘制SVG图像。在PC上显示所有元素，当我使用iPad时，某些元素消失。请参见下面的代码：未在iPad上显示SVG元素

<svg id="mimic_id" width="750" height="600" viewBox="0 0 750 600" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <path transform="rotate(-20,120,120)" d="M -7,0 c 0 -7 14 -7 14 0 c -2 -2 -10 -2 -180 0" id="ButtonOnHighlight" style="fill:url(#linearOnGradientGlowWhite); stroke:none" /> 
    <linearGradient id="linearGradientWhite"> 
     <stop id="stop3032" style="stop-color:#ffffff;stop-opacity:1" offset="0" /> 
     <stop id="stop3034" style="stop-color:#ffffff;stop-opacity:0" offset="1" /> 
    </linearGradient> 
    <linearGradient id="linearLedGradientBlack"> 
     <stop id="stop3163" style="stop-color:#000000;stop-opacity:0" offset="0.15" /> 
     <stop id="stop3161" style="stop-color:#000000;stop-opacity:0.33" offset="1" /> 
    </linearGradient> 
    <linearGradient x1="0" y1="-70" x2="0" y2="0" id="linearLedGradientGlowWhite" xlink:href="#linearGradientWhite" gradientUnits="userSpaceOnUse" /> 
    <radialGradient cx="0" cy="0" r="80" fx="20" fy="20" id="linearLedGradientGlowBlack" xlink:href="#linearLedGradientBlack" gradientUnits="userSpaceOnUse" /> 
    <g id="Led" transform="scale (0.1)"> 
     <circle id="LedBase" cx="0" cy="0" r="70" /> 
     <circle id="LedGlow" cx="0" cy="0" r="70" style="fill:url(#linearLedGradientGlowBlack);stroke:none" /> 
     <path transform="rotate(-60,0,0)" d="M -65,0 c 0,-85 130,-85 130,0 c -20,-20 -110,-20 -130,0" id="fillLedHighlight" style="fill:url(#linearLedGradientGlowWhite); stroke:none" /> 
    </g> 
    <g id="bottom_piston" style="fill:#aaa; stroke: black; stroke-width:1px;"> 
     <rect x="0" y="0" height="5" width="90" /> 
     <rect x="42" y="5" height="50" width="4" /> 
    </g> 
    <g id="top_piston" style="fill:#aaa; stroke: black; stroke-width:1px;"> 
     <rect x="42" y="0" height="50" width="4" /> 
     <rect x="0" y="50" height="5" width="90" /> 
    </g> 
    <g id="th_flap" style="fill:#aaa; stroke: #000; stroke-width:1px;"> 
     <rect x="0" y="0" height="35" width="3" /> 
     <circle cx="2" cy="40" r="5" /> 
     <path d="M 3 6 l 7 0 s 10 0 0 12 l -7 0" /> 
     <circle cx="9" cy="12" r="3" /> 
    </g> 
    <g id="bh_flap" style="fill:#aaa; stroke: #000; stroke-width:1px;"> 
     <rect x="0" y="0" height="46" width="3" /> 
     <circle cx="2" cy="0" r="5" /> 
     <path d="M 3 39 l 7 0 s 10 0 0 -12 l -7 0" /> 
     <circle cx="9" cy="33" r="3" /> 
    </g> 
    <g id="flap_piston" style="fill:#aaa; stroke: #000; stroke-width:1px;"> 
     <rect x="0" y="0" width="55" height="4" /> 
     <circle cx="0" cy="2" r="4" /> 
    </g> 
    <g id="link_piston" style="fill:#aaa; stroke: #000; stroke-width:1px;"> 
     <rect x="0" y="0" width="25" height="4" /> 
    </g> 
</defs> 
<use id="M_DO" xlink:href="#Led" x="180" y="360" data-tav-animation-fillcolor-expr="[M_DO]" data-tav-animation-fillcolor-param="'fillOff';'fillGreen'" data-tav-label="Led" name="M_DO" /> 
<use id="BS_PISTON" xlink:href="#bottom_piston" x="265" y="344" data-tav-animation-translateY-expr="[M_TS]" data-tav-animation-translateY-param="0;0;1;15;1000" name="bottom_piston_translate_Y" /> 
<use id="TS_PISTON" xlink:href="#top_piston" x="265" y="160" data-tav-animation-translateY-expr="[M_TS]" data-tav-animation-translateY-param="0;0;1;-15;1000" name="top_piston_translate_Y" /> 
<g id="TH_FLAP_OBJ"> 
    <g id="tras_TH_FLAP_LINK" name="tras_TH_FLAP_LINK" data-tav-animation-translateX-expr="[M_TH]" data-tav-animation-translateX-param="0;0;1;-50;2000"> 
     <use id="TH_FLAP_LINK" xlink:href="#link_piston" x="470" y="198" data-tav-animation-rotate-expr="[M_TH]" data-tav-animation-rotate-param="495;200;0;0;1;-77;2400" name="top_flap_link" /> 
    </g> 
    <!-- --> 
    <use id="TH_FLAP_PISTON" xlink:href="#flap_piston" x="495" y="198" data-tav-animation-translateX-expr="[M_TH]" data-tav-animation-translateX-param="0;0;1;-50;2000" name="top_flap_piston_translate_X" /> 
    <use id="TH_FLAP" xlink:href="#th_flap" x="466" y="188" data-tav-animation-rotate-expr="[M_TH]" data-tav-animation-rotate-param="468;228;0;0;1;-90;2000" name="top_flap_rotate" /> 
</g> 
<g id="BH_FLAP_OBJ"> 
    <g id="tras_BH_FLAP_LINK" name="tras_BH_FLAP_LINK" data-tav-animation-translateX-expr="[M_BH]" data-tav-animation-translateX-param="0;0;1;-50;2000"> 
     <use id="BH_FLAP_LINK" xlink:href="#link_piston" x="470" y="358" data-tav-animation-rotate-expr="[M_BH]" data-tav-animation-rotate-param="496;360;0;0;1;68;2300" name="bottom_flap_link" /> 
    </g> 
    <use id="BH_FLAP_PISTON" xlink:href="#flap_piston" x="495" y="358" data-tav-animation-translateX-expr="[M_BH]" data-tav-animation-translateX-param="0;0;1;-50;2000" name="bottom_flap_piston_translate_X" /> 
    <use id="BH_FLAP" xlink:href="#bh_flap" x="466" y="327" data-tav-animation-rotate-expr="[M_BH]" data-tav-animation-rotate-param="468;327;0;0;1;90;2000" name="bottom_flap_rotate" /> 
</g> 
<g id="resistor" style="stroke: black; stroke-width:1px;" data-tav-animation-fillcolor-expr="[M_HE1]" data-tav-animation-fillcolor-param="'fillOff';'fillRed'" name="RESISTORS"> 
    <rect x="230" y="215" height="7" width="157" /> 
    <rect x="230" y="337" height="7" width="157" /> 
    <rect x="230" y="222" height="115" width="7" /> 
    <rect x="380" y="222" height="115" width="7" /> 
</g>

Here you can see the fiddle

正如你可以看到（如果你已经一个iPad，我没有与iPhone尝试，但我认为这将具有相同的行为）与一台PC（使用FF21，Chrome28和IE10测试）显示所有元素 What should be shown