Question

我正在尝试使用HTML5和内联svg标记绘制SVG图像。在PC上所有元素都显示正确，当我使用我的iPad时，一些元素消失了。请参阅以下代码：

<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

只有iPad的显示位于页面中央，其他元素消失。我用Safari和Chrome28进行了测试。

What I can see on iPad

你能找出问题出在哪里吗？

注意

iOS 7的问题已经解决了。现在一切正常;）

Answer 1

<use>在Ipad上中断，这是一个浏览器（用户代理）问题，超出了我们的控制范围。两种可能的解决方案： -

重新编码XML标记以避免<use>
将图表转换为JPG并将其添加为<image>

SVG元素未在iPad上显示

1 个答案: