1

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>

ここでフィドルを見ることができます

ご覧のとおり (iPad をお持ちの場合、iPhone では試していませんが、同じ動作になると思います) PC (FF21、Chrome28、および IE10 でテスト済み) ですべての要素が表示されます。 何を示すべきか

iPad では、ページの中央にある四角形のみが表示され、他の要素は非表示になります。Safari と Chrome28 でテストしました。

iPadで見られるもの

どこに問題があるのか​​ わかりますか？

注意

iOS 7 では、この問題は解決されました。すべてが正しく動作するようになりました;)

4

1 に答える 1

1

<use>Ipad で壊れます。これはブラウザー (ユーザー エージェント) の問題であり、私たちの制御を超えています。2 つの可能な解決策:-

  1. XML タグを再コーディングして回避する<use>
  2. 図を JPG に変換し、<image>
于 2013-08-02T23:30:20.770 に答える