主页 / 问题 / 1098960
Accepted
Dan
Asked:2020-03-24 15:22:06 +0800 CST2020-03-24 15:22:06 +0800 CST

为什么 SVG 不能在 iphone 上正确显示？

  • 772

下午好，有这样的SVG代码

<svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M318 175C318 206.596 307.235 237.25 287.48 261.909C267.724 286.568 240.157 303.76 209.322 310.652C178.486 317.545 146.223 313.726 117.848 299.826C89.474 285.925 66.6821 262.773 53.229 234.183C39.776 205.594 36.4646 173.274 43.8406 142.551C51.2166 111.828 68.8399 84.5341 93.8059 65.1685C118.772 45.8028 149.591 35.5209 181.183 36.0171C212.776 36.5134 243.256 47.7584 267.602 67.8986L179 175H318Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="358" height="358" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.72549 0 0 0 0 0.788235 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="179" y1="36" x2="179" y2="314" gradientUnits="userSpaceOnUse">
<stop stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
</linearGradient>
</defs>
</svg>

在包括移动设备在内的其他浏览器上，一切看起来都很棒，但在 IOS 上却被剪掉了。它适用于所有 iOS 浏览器。谁能告诉发生了什么

svg

1 个回答

  1. Best Answer

    在包括移动设备在内的其他浏览器上，一切看起来都很棒，但在 IOS 上却被剪掉了。它适用于所有 iOS 浏览器。谁能告诉发生了什么

    有两个潜在错误可能无法处理Safari

    1. 梯度未设置为第一个值stop offset ="0"

    它是：

    <stop stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>

    改成：

    <stop offset="0" stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
    1. 过滤器feColorMatrix指定了错误的127不透明度值，该值不能大于1

    它是：

    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>

    改成：

    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>

    试试吧，修改后的代码，不幸的是我没有什么可检查的。

    <svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M318 175C318 206.596 307.235 237.25 287.48 261.909C267.724 286.568 240.157 303.76 209.322 310.652C178.486 317.545 146.223 313.726 117.848 299.826C89.474 285.925 66.6821 262.773 53.229 234.183C39.776 205.594 36.4646 173.274 43.8406 142.551C51.2166 111.828 68.8399 84.5341 93.8059 65.1685C118.772 45.8028 149.591 35.5209 181.183 36.0171C212.776 36.5134 243.256 47.7584 267.602 67.8986L179 175H318Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="358" height="358" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.72549 0 0 0 0 0.788235 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="179" y1="36" x2="179" y2="314" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
</linearGradient>
</defs>
</svg>

    更新

    1. 裁剪图像最可能的原因可能是 滤镜效果区域（滤镜区域）
      如果滤镜区域的宽度或高度不足，则图像可能会被裁剪。尝试增加属性width，height和/或移动区域的顶角x，y

    <filter id="filter0_d" x="0" y="0" width="358" height="358"

    例如，我将滤镜区域缩小358 -> 300，图像将被裁剪： 

    <svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M318 175C318 206.596 307.235 237.25 287.48 261.909C267.724 286.568 240.157 303.76 209.322 310.652C178.486 317.545 146.223 313.726 117.848 299.826C89.474 285.925 66.6821 262.773 53.229 234.183C39.776 205.594 36.4646 173.274 43.8406 142.551C51.2166 111.828 68.8399 84.5341 93.8059 65.1685C118.772 45.8028 149.591 35.5209 181.183 36.0171C212.776 36.5134 243.256 47.7584 267.602 67.8986L179 175H318Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="300" height="300" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.72549 0 0 0 0 0.788235 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="179" y1="36" x2="179" y2="314" gradientUnits="userSpaceOnUse">
<stop stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
</linearGradient>
</defs>
</svg>

    通过评论 更新2

    是的，原因确实是 3 分。在adaptive上，我使用css减小了svg的大小，但是filter的width和height值保持不变，我也必须为它们设置更改。

    最好将过滤器区域设置为百分比width="120%" height="120%" x="-20%" y="-20%"（这些是默认值） filterUnits="userSpaceOnUse"- 在这种情况下无法指定（只需删除）

    • 4

相关问题