时间戳

首页 > 解决方案 > SVG 无法在 iOS Safari 和 Chrome 上正确呈现

svg - SVG 无法在 iOS Safari 和 Chrome 上正确呈现

问题描述

在我的网站https://poshwash.london上，我在标题中有一个嵌入 SVG 的徽标。它在任何地方看起来都很棒，但现在当我在 Safari 或 Chrome 中查看我的 iPhone 时，我可以看到谁翻过文字，而不仅仅是上半部分。

svg {
  background-color: black;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 424.67 298.43">
<defs>
    <filter id="luminosity-noclip" x="-9.15" y="0" width="461.31" height="304.67" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-color="#fff" result="bg" />
        <feBlend in="SourceGraphic" in2="bg" />
    </filter>
    <mask id="mask" x="-9.15" y="0" width="461.31" height="304.67" maskUnits="userSpaceOnUse">
        <rect x="-9.15" y="160.88" width="461.31" height="143.79" style="filter:url(#luminosity-noclip)" />
    </mask>
</defs>
<title>Logo_original</title>
<rect x="338.14" y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<rect y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<path d="M53.39,204H12.83v21.37h-11V172.17H92q7.56,0,7.56,10.85v8.88Q99.54,204,92,204H53.39Zm32.45-19.51h-73v8.11H86.06a4.49,4.49,0,0,0,2.41-3.84C88.47,187.19,87.59,185.76,85.84,184.45Z" style="fill:#fff" />
<path d="M168.93,225.33H118.39q-8.65,0-8.66-12.93V183.35q0-11.17,8.77-11.18H199q8.34,0,8.34,11.18V212.4q0,12.93-8.34,12.93h-30Zm27.18-15.89V188.83a3.89,3.89,0,0,0-1.2-3.18,7.55,7.55,0,0,0-2.74-1.42H124.09q-3,.11-3,4.6v20.61q1.32,3.28,3,3.29h69.06C194.1,212.58,195.09,211.49,196.11,209.44Z" style="fill:#fff" />
<path d="M314.94,212.4q0,12.93-8.55,12.93h-89v-13h83.09a6.19,6.19,0,0,0,2-1.75,21.7,21.7,0,0,0,1.27-1.87c0-3-1-4.57-3.07-4.71H225.05q-7.67-.22-7.67-11.73v-9q0-11.07,7.78-11.07h89.78v12.5H230.86a2.14,2.14,0,0,0-1.75,1.15,5.15,5.15,0,0,0-.77,3,3.74,3.74,0,0,0,.77,2.63,2.37,2.37,0,0,0,1.75.82h75.53q8.55,0,8.55,12Z" style="fill:#fff" />
<path d="M422.8,225.33H411.62V204H336v21.37H324.91V172.5l11.08-.11v20.17h75.63V172.39l11.18.11Z" style="fill:#fff" />
<path d="M177.67,266.16l-2.2,6.94-3.33-.08,7.72-23.85h3.86L191.53,273l-3.42.08L186,266.16Zm4.12-13.49-3.32,10.8h6.64Z" style="fill:#fff" />
<path d="M239.66,265.13c.58,2.87,2,5,5.11,5,2.46,0,4.39-1.34,4.39-3.94,0-2.87-2.42-3.59-4.71-4.53-3.4-1.44-6.63-2.33-6.63-6.72,0-3.95,3.18-6.14,6.86-6.14,3.9,0,6.18,2.24,7.12,5.87l-2.87.85c-.53-2.28-1.74-3.9-4.3-3.9-1.92,0-3.81,1-3.81,3.09s1.35,2.83,3.14,3.64l5,2.19a5.94,5.94,0,0,1,3.23,5.47c0,4.44-3.09,6.94-7.39,6.94s-7.08-2.77-7.8-6.94Z" style="fill:#fff" />
<path d="M299.68,249.17h3v9.68h9.23v-9.68h3v23.35h-3v-11h-9.23v11h-3Z" style="fill:#fff" />
<polygon points="115.15 272.18 119.03 258.72 122.92 272.18 125.39 272.18 128.31 248.94 125.27 248.59 123.43 264.99 123.34 264.99 119.44 253.52 118.63 253.52 114.73 264.99 114.64 264.99 112.85 248.59 109.76 248.94 112.68 272.18 115.15 272.18" style="fill:#fff" />
<g style="mask:url(#mask)">
    <path d="M288.47,95.48c.56.79,1.11,1.58,1.65,2.39C289.58,97.06,289,96.27,288.47,95.48Z" style="fill:#fff;opacity:0.33" />
    <path d="M286.15,92.36c.49.62,1,1.25,1.44,1.88C287.12,93.61,286.64,93,286.15,92.36Z" style="fill:#fff;opacity:0.33" />
    <path d="M279.29,84.45c-.52-.54-1-1.07-1.57-1.59C278.25,83.38,278.77,83.91,279.29,84.45Z" style="fill:#fff;opacity:0.33" />
    <path d="M274.54,79.88c.65.58,1.28,1.17,1.91,1.76C275.82,81.05,275.19,80.46,274.54,79.88Z" style="fill:#fff;opacity:0.33" />
    <path d="M206.14,147l.48-1.2H202l-2.19,5.41h-3l2.88-7.13h8.58a1.44,1.44,0,0,1,1.27.55,1.29,1.29,0,0,1,.09,1.31l-.34.85a2.84,2.84,0,0,1-1.16,1.32,3.07,3.07,0,0,1-1.7.54h-4.06L203,147Z" style="fill:#fff" />
    <path d="M219.9,151.17H208.52L211.4,144h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.12,5.26a3,3,0,0,1-1.08,1.33A2.72,2.72,0,0,1,219.9,151.17Z" style="fill:#fff" />
    <path d="M205.91,146.72l.48-1.2h-4.64l-2.19,5.42h-3l2.88-7.13H208a1.44,1.44,0,0,1,1.27.54,1.33,1.33,0,0,1,.1,1.32l-.35.85a2.94,2.94,0,0,1-1.16,1.32,3.12,3.12,0,0,1-1.7.53H202.1l.67-1.65Z" style="fill:#fff" />
    <path d="M219.66,150.94H208.29l2.87-7.13h2.71l-2.17,5.35h2.57l2.16-5.35h2.71L217,149.16h2.57l2.16-5.35h2.7l-2.12,5.25a2.93,2.93,0,0,1-1.08,1.33A2.73,2.73,0,0,1,219.66,150.94Z" style="fill:#fff" />
    <path d="M212.5,0A149.22,149.22,0,1,0,361.71,149.21,149.22,149.22,0,0,0,212.5,0Zm0,264.06A114.85,114.85,0,1,1,236.84,37c2.11-3.39,1.24-8.09-1.52-16.28,5.2,15.4,8.27,16.92,23.67,11.72-6.85,2.32-11,4.21-12.93,7A114.86,114.86,0,0,1,212.5,264.06Z" style="fill:#fff" />
    <path d="M244.68,42.87c-.43,3.11.57,7.22,2.59,13.2-5.2-15.39-8.27-16.92-23.67-11.72a47.35,47.35,0,0,0,9.9-4.23,111,111,0,1,0,11.18,2.75Zm51.83,74.28,1.82,5.57,1.47,4.53s-43.93,15.43-45.87,9.44S296.51,117.15,296.51,117.15ZM239,63.13a2.57,2.57,0,0,0-.5-.39A90.49,90.49,0,0,1,287.83,99.5v.11s-35.26,26.81-50.3,17S239,63.13,239,63.13Zm-3.59,67.51a9.3,9.3,0,1,1-6,11.71A9.3,9.3,0,0,1,235.38,130.64Zm-12.59,32.12a9.29,9.29,0,1,1-2.06,13A9.3,9.3,0,0,1,222.79,162.76ZM208,59.4h10.62s1.11,46.54-5.2,46.54S208,59.4,208,59.4Zm4.1,51.75a9.3,9.3,0,1,1-9.3,9.29A9.29,9.29,0,0,1,212.06,111.15Zm-10.73,51.61a9.3,9.3,0,1,1-13,2.06A9.3,9.3,0,0,1,201.33,162.76Zm-15,20.94c5.1,3.7-23,40.84-23,40.84l-4.75-3.45-3.85-2.79S181.25,180,186.35,183.7ZM177,136.61a9.3,9.3,0,1,1,6,11.71A9.31,9.31,0,0,1,177,136.61Zm11.43-74.42.16.06s14.6,41.82.66,53.11-50.45-17.93-50.45-17.93l-.14-.16A90.4,90.4,0,0,1,188.44,62.19Zm-60.95,58,1.47-4.53S173.57,129,171.62,135s-45.94-9.22-45.94-9.22Zm12.79,83.18-.32-.45.33.44Zm-4.66-6.87,0-.06q-.71-1.14-1.38-2.31l-.28-.5c-.46-.81-.91-1.62-1.34-2.44l-.18-.36c-.46-.88-.91-1.76-1.33-2.65l0,0a89.66,89.66,0,0,1-7.29-22.35l-.15-.78a90.63,90.63,0,0,1-1.41-15.82c0-1.34,0-2.69.1-4l.09-.12s44.29-1,50.72,15.78-32.64,42.45-32.64,42.45l-.18.07C138.63,201.16,137.08,198.87,135.62,196.51Zm4.68,6.87c1.46,1.93,3,3.8,4.58,5.61C143.28,207.18,141.76,205.31,140.3,203.38Zm9.85,11.1a90.77,90.77,0,0,0,17.52,13.1A90.77,90.77,0,0,1,150.15,214.48Zm91.54,20.15c-.65.22-1.31.43-2,.63A90.23,90.23,0,0,1,221.27,239c-.69.07-1.37.15-2.06.21-2.22.16-4.45.27-6.71.27a89.8,89.8,0,0,1-31.73-5.8l-.05-.08s12.76-42.42,30.67-43.36,30.29,44.16,30.29,44.16v.21Zm22.52-12-3.84,2.8s-28.26-37-23.16-40.71S269,219.21,269,219.21Zm18.87-17.17-.13,0S246.55,180.27,251.2,163s51.35-15.16,51.35-15.16l.2.05q-.06-3.68-.4-7.29c.27,2.85.43,5.74.43,8.66A89.86,89.86,0,0,1,283.08,205.48Z" style="fill:#fff" />
</g>
</svg>

标签： svg

解决方案

那个 SVG 包含一些有点奇怪的东西。掩码有一个应用了过滤器的元素。它是有效的 SVG，但如果掩码不起作用，那么我怀疑这就是问题所在。

过滤器部分是完全没有必要的。您可以删除它并稍微更改蒙版以获得完全相同的结果。

试试这个版本，看看它是否工作得更好。

svg {
  background-color: black;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 424.67 298.43">
<defs>
    <mask id="mask" x="-9.15" y="0" width="461.31" height="304.67" maskUnits="userSpaceOnUse">
        <rect width="100%" height="100%" style="fill:#fff"/>
        <rect x="-9.15" y="160.88" width="461.31" height="143.79" style="fill:#000" />
    </mask>
</defs>
<title>Logo_original</title>
<rect x="338.14" y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<rect y="256.69" width="86.54" height="2.81" style="fill:#fff" />
<path d="M53.39,204H12.83v21.37h-11V172.17H92q7.56,0,7.56,10.85v8.88Q99.54,204,92,204H53.39Zm32.45-19.51h-73v8.11H86.06a4.49,4.49,0,0,0,2.41-3.84C88.47,187.19,87.59,185.76,85.84,184.45Z" style="fill:#fff" />
<path d="M168.93,225.33H118.39q-8.65,0-8.66-12.93V183.35q0-11.17,8.77-11.18H199q8.34,0,8.34,11.18V212.4q0,12.93-8.34,12.93h-30Zm27.18-15.89V188.83a3.89,3.89,0,0,0-1.2-3.18,7.55,7.55,0,0,0-2.74-1.42H124.09q-3,.11-3,4.6v20.61q1.32,3.28,3,3.29h69.06C194.1,212.58,195.09,211.49,196.11,209.44Z" style="fill:#fff" />
<path d="M314.94,212.4q0,12.93-8.55,12.93h-89v-13h83.09a6.19,6.19,0,0,0,2-1.75,21.7,21.7,0,0,0,1.27-1.87c0-3-1-4.57-3.07-4.71H225.05q-7.67-.22-7.67-11.73v-9q0-11.07,7.78-11.07h89.78v12.5H230.86a2.14,2.14,0,0,0-1.75,1.15,5.15,5.15,0,0,0-.77,3,3.74,3.74,0,0,0,.77,2.63,2.37,2.37,0,0,0,1.75.82h75.53q8.55,0,8.55,12Z" style="fill:#fff" />
<path d="M422.8,225.33H411.62V204H336v21.37H324.91V172.5l11.08-.11v20.17h75.63V172.39l11.18.11Z" style="fill:#fff" />
<path d="M177.67,266.16l-2.2,6.94-3.33-.08,7.72-23.85h3.86L191.53,273l-3.42.08L186,266.16Zm4.12-13.49-3.32,10.8h6.64Z" style="fill:#fff" />
<path d="M239.66,265.13c.58,2.87,2,5,5.11,5,2.46,0,4.39-1.34,4.39-3.94,0-2.87-2.42-3.59-4.71-4.53-3.4-1.44-6.63-2.33-6.63-6.72,0-3.95,3.18-6.14,6.86-6.14,3.9,0,6.18,2.24,7.12,5.87l-2.87.85c-.53-2.28-1.74-3.9-4.3-3.9-1.92,0-3.81,1-3.81,3.09s1.35,2.83,3.14,3.64l5,2.19a5.94,5.94,0,0,1,3.23,5.47c0,4.44-3.09,6.94-7.39,6.94s-7.08-2.77-7.8-6.94Z" style="fill:#fff" />
<path d="M299.68,249.17h3v9.68h9.23v-9.68h3v23.35h-3v-11h-9.23v11h-3Z" style="fill:#fff" />
<polygon points="115.15 272.18 119.03 258.72 122.92 272.18 125.39 272.18 128.31 248.94 125.27 248.59 123.43 264.99 123.34 264.99 119.44 253.52 118.63 253.52 114.73 264.99 114.64 264.99 112.85 248.59 109.76 248.94 112.68 272.18 115.15 272.18" style="fill:#fff" />
<g style="mask:url(#mask)">
    <path d="M288.47,95.48c.56.79,1.11,1.58,1.65,2.39C289.58,97.06,289,96.27,288.47,95.48Z" style="fill:#fff;opacity:0.33" />
    <path d="M286.15,92.36c.49.62,1,1.25,1.44,1.88C287.12,93.61,286.64,93,286.15,92.36Z" style="fill:#fff;opacity:0.33" />
    <path d="M279.29,84.45c-.52-.54-1-1.07-1.57-1.59C278.25,83.38,278.77,83.91,279.29,84.45Z" style="fill:#fff;opacity:0.33" />
    <path d="M274.54,79.88c.65.58,1.28,1.17,1.91,1.76C275.82,81.05,275.19,80.46,274.54,79.88Z" style="fill:#fff;opacity:0.33" />
    <path d="M206.14,147l.48-1.2H202l-2.19,5.41h-3l2.88-7.13h8.58a1.44,1.44,0,0,1,1.27.55,1.29,1.29,0,0,1,.09,1.31l-.34.85a2.84,2.84,0,0,1-1.16,1.32,3.07,3.07,0,0,1-1.7.54h-4.06L203,147Z" style="fill:#fff" />
    <path d="M219.9,151.17H208.52L211.4,144h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.16,5.36h2.56l2.17-5.36h2.7l-2.12,5.26a3,3,0,0,1-1.08,1.33A2.72,2.72,0,0,1,219.9,151.17Z" style="fill:#fff" />
    <path d="M205.91,146.72l.48-1.2h-4.64l-2.19,5.42h-3l2.88-7.13H208a1.44,1.44,0,0,1,1.27.54,1.33,1.33,0,0,1,.1,1.32l-.35.85a2.94,2.94,0,0,1-1.16,1.32,3.12,3.12,0,0,1-1.7.53H202.1l.67-1.65Z" style="fill:#fff" />
    <path d="M219.66,150.94H208.29l2.87-7.13h2.71l-2.17,5.35h2.57l2.16-5.35h2.71L217,149.16h2.57l2.16-5.35h2.7l-2.12,5.25a2.93,2.93,0,0,1-1.08,1.33A2.73,2.73,0,0,1,219.66,150.94Z" style="fill:#fff" />
    <path d="M212.5,0A149.22,149.22,0,1,0,361.71,149.21,149.22,149.22,0,0,0,212.5,0Zm0,264.06A114.85,114.85,0,1,1,236.84,37c2.11-3.39,1.24-8.09-1.52-16.28,5.2,15.4,8.27,16.92,23.67,11.72-6.85,2.32-11,4.21-12.93,7A114.86,114.86,0,0,1,212.5,264.06Z" style="fill:#fff" />
    <path d="M244.68,42.87c-.43,3.11.57,7.22,2.59,13.2-5.2-15.39-8.27-16.92-23.67-11.72a47.35,47.35,0,0,0,9.9-4.23,111,111,0,1,0,11.18,2.75Zm51.83,74.28,1.82,5.57,1.47,4.53s-43.93,15.43-45.87,9.44S296.51,117.15,296.51,117.15ZM239,63.13a2.57,2.57,0,0,0-.5-.39A90.49,90.49,0,0,1,287.83,99.5v.11s-35.26,26.81-50.3,17S239,63.13,239,63.13Zm-3.59,67.51a9.3,9.3,0,1,1-6,11.71A9.3,9.3,0,0,1,235.38,130.64Zm-12.59,32.12a9.29,9.29,0,1,1-2.06,13A9.3,9.3,0,0,1,222.79,162.76ZM208,59.4h10.62s1.11,46.54-5.2,46.54S208,59.4,208,59.4Zm4.1,51.75a9.3,9.3,0,1,1-9.3,9.29A9.29,9.29,0,0,1,212.06,111.15Zm-10.73,51.61a9.3,9.3,0,1,1-13,2.06A9.3,9.3,0,0,1,201.33,162.76Zm-15,20.94c5.1,3.7-23,40.84-23,40.84l-4.75-3.45-3.85-2.79S181.25,180,186.35,183.7ZM177,136.61a9.3,9.3,0,1,1,6,11.71A9.31,9.31,0,0,1,177,136.61Zm11.43-74.42.16.06s14.6,41.82.66,53.11-50.45-17.93-50.45-17.93l-.14-.16A90.4,90.4,0,0,1,188.44,62.19Zm-60.95,58,1.47-4.53S173.57,129,171.62,135s-45.94-9.22-45.94-9.22Zm12.79,83.18-.32-.45.33.44Zm-4.66-6.87,0-.06q-.71-1.14-1.38-2.31l-.28-.5c-.46-.81-.91-1.62-1.34-2.44l-.18-.36c-.46-.88-.91-1.76-1.33-2.65l0,0a89.66,89.66,0,0,1-7.29-22.35l-.15-.78a90.63,90.63,0,0,1-1.41-15.82c0-1.34,0-2.69.1-4l.09-.12s44.29-1,50.72,15.78-32.64,42.45-32.64,42.45l-.18.07C138.63,201.16,137.08,198.87,135.62,196.51Zm4.68,6.87c1.46,1.93,3,3.8,4.58,5.61C143.28,207.18,141.76,205.31,140.3,203.38Zm9.85,11.1a90.77,90.77,0,0,0,17.52,13.1A90.77,90.77,0,0,1,150.15,214.48Zm91.54,20.15c-.65.22-1.31.43-2,.63A90.23,90.23,0,0,1,221.27,239c-.69.07-1.37.15-2.06.21-2.22.16-4.45.27-6.71.27a89.8,89.8,0,0,1-31.73-5.8l-.05-.08s12.76-42.42,30.67-43.36,30.29,44.16,30.29,44.16v.21Zm22.52-12-3.84,2.8s-28.26-37-23.16-40.71S269,219.21,269,219.21Zm18.87-17.17-.13,0S246.55,180.27,251.2,163s51.35-15.16,51.35-15.16l.2.05q-.06-3.68-.4-7.29c.27,2.85.43,5.74.43,8.66A89.86,89.86,0,0,1,283.08,205.48Z" style="fill:#fff" />
</g>
</svg>

推荐阅读