У меня проблема с элементом SVG, содержащим многоугольники, изображения и пути клипа на устройствах IOS. Мой код хорошо работает в Windows и Android, но в iPhone изображение не появляется. Я могу SVG, другие элементы (линии), но мое изображение не появляется. В моем коде много полигонов и изображений, изображения обрезаются полигонами внутри путей клипа, и они образуют пользовательскую сетку.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1579 957" class="menu-home mobile overflow-visible">
<defs>
<style>
.st9 {
fill: #fff;
stroke: #D29601;
stroke-width: 5px;
}
.text-mobile{
fill:#ffffff;
}
</style>
</defs>
<g>
<clipPath id="clip-mobile-capacitacao-corporativa">
<polygon points="254 56 378 350 284 680 0 770 0 0 254 56" />
</clipPath>
</g>
<a xlink:href="https://lugli.group/treinamentos/" clip-path="url(#clip-mobile-capacitacao-corporativa)">
<image xlink:href="https://lugli.group/wp-content/uploads/2019/10/capacitacao-corporativa.png" x="100" y="60" style="height: 600px;overflow:hidden;"/>
<text class="text-mobile" transform="translate(120.32 348.4)">CAPACITAÇÃO</text>
<text class="text-mobile" transform="translate(120.32 392.4)">CORPORATIVA</text>
</a>
<g>
</g>
<g id="Camada_3" data-name="Camada 3">
<a xlink:href="https://lugli.group/investimentos/">
<clipPath id="clip-mobile-investimentos">
<polygon points="254 56 453 98 837 488 284 680 378 350 254 56" />
</clipPath>
<image xlink:href="https://lugli.group/wp-content/uploads/2019/10/investimentos.png" clip-path="url(#clip-mobile-investimentos)" x="40" y="60" style="width:850px;"></image>
<text class="text-mobile" transform="translate(431.32 440.4)">
INVESTIMENTOS
</text>
</a>
</g>
<g id="Camada_4" data-name="Camada 4">
<a xlink:href="https://lugli.group/consultoria/">
<clipPath id="clip-mobile-consultoria">
<polygon points="453 98 837 488 1388 301 453 98" />
</clipPath>
<image xlink:href="https://lugli.group/wp-content/uploads/2019/10/consultoria.png" clip-path="url(#clip-mobile-consultoria)" x="450" y="30" style="width:940px;"></image>
<text class="text-mobile" transform="translate(767.32 362.4)">
CONSULTORIA
</text>
</a>
</g>
<g id="Camada_5" data-name="Camada 5">
<a xlink:href="https://lugli.group/contato/">
<clipPath id="clip-mobile-contato">
<polygon points="284 680 1225 881 837 488 284 680" />
</clipPath>
<image xlink:href="https://lugli.group/wp-content/uploads/2019/10/contato.png" clip-path="url(#clip-mobile-contato)" x="290" y="390" style="width:950px;"></image>
<text class="text-mobile" transform="translate(709.32 635.4)">
CONTATO
</text>
</a>
</g>
<g id="Camada_6" data-name="Camada 6">
<a xlink:href="https://lugli.group/sustentabilidade/">
<clipPath id="clip-mobile-sustentabilidade">
<polygon points="837 488 1388 301 1295 626 1420 923 1225 881 837 488" />
</clipPath>
<image xlink:href="https://lugli.group/wp-content/uploads/2019/10/sustentabilidade.png" clip-path="url(#clip-mobile-sustentabilidade)" x="800" y="200" style="width:700px;"></image>
<text class="text-mobile" transform="translate(968.32 567.4)">
SUSTENTABILIDADE
</text>
</g>
<g id="Camada_7" data-name="Camada 7">
<a xlink:href="https://lugli.group/historia/">
<clipPath id="clip-mobile-sobre-nos">
<polygon points="1388 301 1579 240 1579 957 1420 923 1295 626 1388 301" />
</clipPath>
<image xlink:href="https://lugli.group/wp-content/uploads/2019/10/sobre-nos.png" clip-path="url(#clip-mobile-sobre-nos)" x="890" y="290"></image>
<text class="text-mobile" transform="translate(1349.32 606.4)">
SOBRE O
</text>
<text class="text-mobile" transform="translate(1346.32 651.4)">
GRUPO
</text>
</g>
<g>
<line class="st9" x1="378.5" y1="350.5" x2="-425.5" y2="-1546.5" />
<line class="st9" x1="378.5" y1="349.5" x2="-622.5" y2="3841.5" />
<line class="st9" x1="837.5" y1="488.5" x2="-774.5" y2="-1150.5"/>
<line class="st9" x1="837.5" y1="488.5" x2="2251.5" y2="1920.5"/>
<line class="st9" x1="283.5" y1="680.5" x2="-958.5" y2="1075.5"/>
<line class="st9" x1="283.5" y1="680.5" x2="837.5" y2="487.5"/>
<line class="st9" x1="836.5" y1="487.5" x2="1388.5" y2="300.5"/>
<line class="st9" x1="1387.5" y1="301.5" x2="2663.5" y2="-105.5"/>
<line class="st9" x1="1388.5" y1="301.5" x2="-1392.5" y2="-303.5"/>
<line class="st9" x1="1294.5" y1="626.5" x2="1917.5" y2="-1540.5"/>
<line class="st9" x1="1294.5" y1="626.5" x2="2716.5" y2="3969.5"/>
<line class="st9" x1="283.5" y1="680.5" x2="2695.5" y2="1193.5"/>
</g>
</svg>Не могли бы вы мне помочь?
