SVG模糊滤镜在iOS上无法使用 wkwebview

Question

我在使用SVG方面是个新手，我遇到了一个问题，那就是 feGaussianBlur 滤镜在iOS wkwebview上无法正确呈现。不过在安卓和桌面上可以正常工作。我不知道到底该如何解决这个问题。任何帮助将被感激。

我应该说这是一个cordovavue项目，cordova使用苹果的wkwebview作为网页视图。

模糊工作(Chrome)

模糊不工作(iOS)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="120%" width="120%">
  <defs>
    <filter
      id="myblurfilter"
      x="0%"
      y="0%"
      width="100%"
      height="100%"
      filterUnits="userSpaceOnUse"
      color-interpolation-filters="sRGB"
    >
      <feGaussianBlur stdDeviation="5" edgeMode="duplicate" result="blur" />
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="1 1" />
      </feComponentTransfer>
      <feImage id="feimage" xlink:href="#rect2" result="mask" />
      <feComposite in2="mask" in="blur" operator="in" result="comp" />
      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>
    <rect id="rect" width="100%" height="100%" rx="5" />
    <clipPath id="clip">
      <use xlink:href="#rect" />
    </clipPath>
    <rect id="rect2" y="70%" width="100%" height="30%" fill="#fff" />
  </defs>
  <use xlink:href="#rect" />
  <image
    x="0"
    width="100%"
    height="100%"
    filter="url(#myblurfilter)"
    clip-path="url(#clip)"
    :xlink:href="data.imageURL"
    preserveAspectRatio="xMinYMin slice"
  />
  <use opacity=".15" xlink:href="#rect2"/>
</svg>

Answer 1

这是一个我在上面评论中提到的版本。我还明确了每个元素的尺寸和位置（xywidthheight），这有时会在Safari中出现问题。我还替换了 use 的形状粘贴在 clipPath 中。这个 应 工作。

这在Firefox中不工作还有一个原因--在Firefox中，feImage不支持片段引用，你必须使用data:uri内联任何你想馈送到feImage的形状。你必须使用data:uri内联任何你想输入到feImage的形状。

更新--第2版：由于某些原因，iOS Safari不喜欢feImagerect2的组合，所以我将滤镜基元改为objectBoundingBox，并将模糊的stdDeviation调整为%单位，并改用定位的feFlood作为遮罩--这在iOS Safari中似乎可以工作了。

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="120%" width="120%">
  <defs>
    <rect id="rect" x="0%" y="0%" width="100%" height="100%" rx="5" />

    <clipPath id="clip">
      <rect x="0%" y="0%" width="100%" height="100%" rx="5" />
    </clipPath>

    <rect id="rect2" x="0%" y="70%" width="100%" height="30%" fill="#fff" />

    <filter
      id="myblurfilter"
      x="0%"
      y="0%"
      width="100%"
      height="100%"
      filterUnits="objectBoundingBox"
      primitiveUnits="objectBoundingBox"
      color-interpolation-filters="sRGB">

      <feGaussianBlur stdDeviation=".005"/>
      <feComponentTransfer result="blur">
        <feFuncA type="discrete" tableValues="1 1" />
      </feComponentTransfer>
      <feFlood flood-color="white"  x="0" y="0.7" height="0.3" width="1" result="mask"/>
      <feComposite in2="mask" in="blur" operator="in" result="comp" />
      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge>
    </filter>

  </defs>
  <use xlink:href="#rect" />
  <image
    x="0%"
    y="0%"
    width="100%"
    height="100%"
    filter="url(#myblurfilter)"
    clip-path="url(#clip)"
    xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/4f/DandelionFlower.jpg"
    preserveAspectRatio="xMinYMin meet"
  />
  <use opacity=".15" xlink:href="#rect2"/>
</svg>