Question

我的问题是，我试图显示一个由7个use元素组成的svg元素（以制作六边形网格）。该svg元素直接定义为HTML文件（来自角度组件）。事实是，在台式机上，一切都能正常显示，但在iPad等移动设备上却无法显示。

信息： -我使用图案以（png）填充每个六角形形状，并使用a来使png的背景变为白色。然后，我在每个元素上使用属性“ fill =“ url（id_of_a_pattern）”。 -我还使用了角度/柔韧性布局，以与角度材质ui元素相关联地显示响应式元素。

<svg  type="image/svg+xml"
      xmlns="http://www.w3.org/2000/svg" version="1.1"
      fxFlex.gt-md="50"
      fxFlexAlign.gt-md="center"
      fxShow="true" fxHide.lt-md="true"
      class="subItem2" id="SVG" viewBox="0 0 100 100">
  <defs>
    <pattern id="img1" width="1" height="1" x="0" y="0">
        <rect width='30' height='30' fill='#fff' />
        <image class='twombly' xlink:href="link_to_an_image_on_the_server.png"
            width="16" height="11" x='2' y='2'/>
    </pattern>
    <g id="pod">
      <polygon  stroke="#000000" stroke-width="0.0" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0"/>
    </g>
  </defs>
  <g class="pod-wrap">
    <use id="1" class="hex" xlink:href="#pod" transform="translate(50, 31)" fill="url(#img1)"/>
  </g>
</svg>

预期的结果与我在台式机上（例如在iPad上）的表现完全相同。

我所拥有的->仅显示可用空间。

感谢您的回答！

如何在移动/平板电脑设备上显示svg元素

0 个答案: