svg 过滤器平铺图像在 ios 上不起作用

Question

我有以下带有过滤器的 svg，该过滤器在 Chrome 中有效，但在 ios 上只有部分有效。不知道是我做错了什么还是 ios 不完全支持它。

<svg height="80" width="500" xmlns="http://www.w3.org/2000/svg">
<defs>
    <circle cx="3" cy="3" r="2" id="circle" fill="#FFFFFF"></circle>
    <filter height="100%" id="filter">
        <feMorphology in="SourceAlpha" operator="dilate" radius="2.5" 
result="MORPH1"></feMorphology>
        <feColorMatrix in="MORPH1" result="GREYED" type="matrix" 
values="0.8 0 0 0 0 0 0.8 0 0 0 0 0 0.8 0 0 0 0 0 0.5 0"> 
</feColorMatrix>
        <feMorphology in="SourceAlpha" operator="dilate" radius="1.5" 
result="MORPH2"></feMorphology>
        <feColorMatrix in="MORPH2" result="WHITENED" type="matrix" 
values="-1 0 0 1 0, 0 -1 0 1 0, 0 0 -1 1 0, 0 0 0 0.8 0"> 
</feColorMatrix>
        <feImage height="2" width="2" xlink:href="#circle">
        </feImage>
        <feTile result="3dot"></feTile>
        <feComposite in="3dot" in2="SourceGraphic" operator="in" 
result="comp"></feComposite>
        <feMerge>
            <feMergeNode in="GREYED"></feMergeNode>
            <feMergeNode in="WHITENED"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
            <feMergeNode in="comp"></feMergeNode>
        </feMerge>
    </filter>
</defs>
<text text-anchor="start" alignment-baseline="hanging" font-size="48" 
x="20" y="20" fill="#803cac" stroke="#000000" stroke-width="1" 
filter="url(#filter)">TEXT HERE</text>
</svg>

结果应该是这样的

但在 ios 上，点没有显示，所以除了这部分之外的所有东西都可以工作

   <feImage height="2" width="2" xlink:href="#circle">
            </feImage>
            <feTile result="3dot"></feTile>
            <feComposite in="3dot" in2="SourceGraphic" operator="in" 
    result="comp"></feComposite>

Answer 1

这是 iOS/Safari 中的一个直接错误（未测试常规 safari）。解决方法是使用填充形状“预先平铺”填充。 （注意 Firefox 不支持 feImage 中的对象引用 - 因此您需要使用内联 data:uri 进行跨浏览器兼容）

<svg height="80" width="500" xmlns="http://www.w3.org/2000/svg">
<defs>
  <pattern id="circle-fill" width="2" height="2" patternUnits="userSpaceOnUse">
    <circle cx="3" cy="3" r="2" id="circle" fill="white"/>
  </pattern>
  <rect x="0" y="0" id="filled-rect" width="100%" height="100%" fill="url(#circle-fill)"/>
  
  
  
    <filter height="100%" id="filter">
        <feMorphology in="SourceAlpha" operator="dilate" radius="2.5" 
result="MORPH1"/>
        <feColorMatrix in="MORPH1" result="GREYED" type="matrix" 
values="0.8 0 0 0 0 0 0.8 0 0 0 0 0 0.8 0 0 0 0 0 0.5 0"/> 

        <feMorphology in="SourceAlpha" operator="dilate" radius="1.5" 
result="MORPH2"/>
        <feColorMatrix in="MORPH2" result="WHITENED" type="matrix" 
values="-1 0 0 1 0 0 -1 0 1 0 0 0 -1 1 0, 0 0 0 0.8 0"/>
        <feImage height="80" width="500" xlink:href="#filled-rect"/>
        <feComposite in="3dot" in2="SourceGraphic" operator="in" 
result="comp"/>
        <feMerge>
            <feMergeNode in="GREYED"/>
            <feMergeNode in="WHITENED"/>
            <feMergeNode in="SourceGraphic"/>
            <feMergeNode in="comp"/>
        </feMerge>
    </filter>
</defs>
<text text-anchor="start" alignment-baseline="hanging" font-size="48" 
x="20" y="20" fill="#803cac" stroke="#000000" stroke-width="1" 
filter="url(#filter)">TEXT HERE</text>
  
</svg>