title: SVG elements not displayed on iPad
body: <p>I'm trying to draw an SVG image using HTML5 and inline svg tag.
  On a PC all elements are shown right, when I use my iPad some elements disappear.
  See the code below:</p>
  
  <pre><code>&lt;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"&gt;
  &lt;defs&gt;
      &lt;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" /&gt;
      &lt;linearGradient id="linearGradientWhite"&gt;
          &lt;stop id="stop3032" style="stop-color:#ffffff;stop-opacity:1" offset="0" /&gt;
          &lt;stop id="stop3034" style="stop-color:#ffffff;stop-opacity:0" offset="1" /&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient id="linearLedGradientBlack"&gt;
          &lt;stop id="stop3163" style="stop-color:#000000;stop-opacity:0" offset="0.15" /&gt;
          &lt;stop id="stop3161" style="stop-color:#000000;stop-opacity:0.33" offset="1" /&gt;
      &lt;/linearGradient&gt;
      &lt;linearGradient x1="0" y1="-70" x2="0" y2="0" id="linearLedGradientGlowWhite" xlink:href="#linearGradientWhite" gradientUnits="userSpaceOnUse" /&gt;
      &lt;radialGradient cx="0" cy="0" r="80" fx="20" fy="20" id="linearLedGradientGlowBlack" xlink:href="#linearLedGradientBlack" gradientUnits="userSpaceOnUse" /&gt;
      &lt;g id="Led" transform="scale (0.1)"&gt;
          &lt;circle id="LedBase" cx="0" cy="0" r="70" /&gt;
          &lt;circle id="LedGlow" cx="0" cy="0" r="70" style="fill:url(#linearLedGradientGlowBlack);stroke:none" /&gt;
          &lt;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" /&gt;
      &lt;/g&gt;
      &lt;g id="bottom_piston" style="fill:#aaa; stroke: black; stroke-width:1px;"&gt;
          &lt;rect x="0" y="0" height="5" width="90" /&gt;
          &lt;rect x="42" y="5" height="50" width="4" /&gt;
      &lt;/g&gt;
      &lt;g id="top_piston" style="fill:#aaa; stroke: black; stroke-width:1px;"&gt;
          &lt;rect x="42" y="0" height="50" width="4" /&gt;
          &lt;rect x="0" y="50" height="5" width="90" /&gt;
      &lt;/g&gt;
      &lt;g id="th_flap" style="fill:#aaa; stroke: #000; stroke-width:1px;"&gt;
          &lt;rect x="0" y="0" height="35" width="3" /&gt;
          &lt;circle cx="2" cy="40" r="5" /&gt;
          &lt;path d="M 3 6 l 7 0 s 10 0 0 12 l -7 0" /&gt;
          &lt;circle cx="9" cy="12" r="3" /&gt;
      &lt;/g&gt;
      &lt;g id="bh_flap" style="fill:#aaa; stroke: #000; stroke-width:1px;"&gt;
          &lt;rect x="0" y="0" height="46" width="3" /&gt;
          &lt;circle cx="2" cy="0" r="5" /&gt;
          &lt;path d="M 3 39 l 7 0 s 10 0 0 -12 l -7 0" /&gt;
          &lt;circle cx="9" cy="33" r="3" /&gt;
      &lt;/g&gt;
      &lt;g id="flap_piston" style="fill:#aaa; stroke: #000; stroke-width:1px;"&gt;
          &lt;rect x="0" y="0" width="55" height="4" /&gt;
          &lt;circle cx="0" cy="2" r="4" /&gt;
      &lt;/g&gt;
      &lt;g id="link_piston" style="fill:#aaa; stroke: #000; stroke-width:1px;"&gt;
          &lt;rect x="0" y="0" width="25" height="4" /&gt;
      &lt;/g&gt;
  &lt;/defs&gt;
  &lt;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" /&gt;
  &lt;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" /&gt;
  &lt;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" /&gt;
  &lt;g id="TH_FLAP_OBJ"&gt;
      &lt;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"&gt;
          &lt;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" /&gt;
      &lt;/g&gt;
      &lt;!-- --&gt;
      &lt;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" /&gt;
      &lt;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" /&gt;
  &lt;/g&gt;
  &lt;g id="BH_FLAP_OBJ"&gt;
      &lt;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"&gt;
          &lt;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" /&gt;
      &lt;/g&gt;
      &lt;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" /&gt;
      &lt;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" /&gt;
  &lt;/g&gt;
  &lt;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"&gt;
      &lt;rect x="230" y="215" height="7" width="157" /&gt;
      &lt;rect x="230" y="337" height="7" width="157" /&gt;
      &lt;rect x="230" y="222" height="115" width="7" /&gt;
      &lt;rect x="380" y="222" height="115" width="7" /&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>
  <a href="http://jsfiddle.net/MaxMarkson/wzDk2/" rel="nofollow noreferrer">Here you can see the fiddle</a></p>
  
  <p>As you can see (if you've an iPad, I didn't try with an iPhone but I think it will have the same behaviour) with a PC (tested with FF21, Chrome28 and IE10) all elements are shown
  <img src="https://i.stack.imgur.com/8dwsx.png" alt="What should be shown"></p>
  
  <p>With the iPad only the rects in the center of the page are shown, other elements disappear.
  I tested it with Safari and Chrome28.</p>
  
  <p><img src="https://i.stack.imgur.com/MYmWX.png" alt="What I can see on iPad"></p>
  
  <p>Can you figure out where's the problem?</p>
  
  <p><strong>ATTENTION</strong></p>
  
  <p>With the iOS 7 the problem has been solved. Now all works correctly ;)</p>