Моя проблема в том, что я пытаюсь отобразить элемент SVG, состоящий из 7 элементов использования (для создания сетки шестиугольника). Этот элемент svg напрямую определен в HTML-файл (из углового компонента). Дело в том, что на рабочем столе все отображается хорошо, но не на таких мобильных устройствах, как iPad.
Информация:
- Я использую шаблоны, чтобы заполнить каждую шестиугольную форму (png) и a, чтобы сделать фон png белым. Затем я на каждом элементе использую атрибут "fill =" url (id_of_a_pattern) ".
- Я также использую угловую / гибкую компоновку для быстрого отображения элементов в ассоциации с угловыми элементами материала.
<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, например.
Что у меня есть -> ничего не отображается, кроме свободного места.
Спасибо за ваш ответ!