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）。解决方法是＆＃34; pre-tile＆＃34;使用填充形状填充。（注意Firefox不支持feImage中的对象引用 - 因此您需要使用内联数据：uri用于跨浏览器compat）

＆＃13;

<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>

＆＃13;

svg过滤瓷砖图片无法在ios

1 个答案: