svg filter tile image not working on ios

Question

I have the following svg with a filter that works in Chrome but on ios only part of it works. Not sure if I'm doing something wrong or if ios doesn't fully support it.

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

The result should look like

but on ios the dots are not displaying so everything apart from this part works

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

score 3 · Accepted Answer · answered Mar 25 '18 at 22:11

This is a straight up bug in iOS/Safari (didn't test regular safari). The workaround is to "pre-tile" the fill using a filled shape. (Note Firefox doesn't support object references in feImage - so you'd need to use an inline data:uri for cross browser compat)

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

Thanks that's been really helpful. Ended up going with the data:uri due to it not working in firefox. It's not ideal as I wanted to dynamically change the circle fill with hex colours from my database and now have to create data:uri for them instead but I can live with that. — dottodot, Mar 26 '18 at 08:23
You can do a recolor in the filter using an extra feColorMatrix: https://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour/46536304#46536304 — Michael Mullany, Mar 27 '18 at 02:02

svg filter tile image not working on ios

1 Answers1