Question

我在IOG设备上包含多边形，图像和剪切路径的SVG元素遇到问题。我的代码在Windows和Android上运行良好，但在iPhone中未显示该图像。我可以使用SVG，其他元素（线条），但是我的图像没有出现。在我的代码中，我有很多多边形和图像，这些图像被剪切路径内的te多边形剪切，并形成一个自定义网格。

 <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>

可以帮我吗？

Answer 1

问题解决了。使用内部元素时，需要定义和属性才能在iPhone上使用。

图像上的SVG剪切路径无法在iOS上运行

1 个答案: