我对使用SVG有点陌生,并且遇到了一个问题,其中feGaussianBlur
过滤器无法在iOS wkwebview上正确呈现。虽然它在android和桌面上都可以正常工作。我不确定该如何解决。任何帮助,将不胜感激。
我应该提到这是一个cordova / vue项目,并且cordova正在使用apple wkwebview作为Web视图。
<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>