php - Is there a workaround for SVGs and filters not working Safari
Get the solution ↓↓↓I've been looking around for a while, and it seems to be pretty well recognized that Safari has some problems applying filters to SVGs. I haven't seen many solutions though, and the few I have come across don't seem relevant to what I'm doing. I'm hoping someone can offer a solution or workaround for what I'm trying to accomplish.
I'm building a game with tiles (think, Settlers of Catan) and I'm using SVG polygons to do it. The polygons are usually blank and have some sort of text in them, but for a few they have an image (fill
) in them. The polygons with text seem to work fine and it is only the images that have problems. There are at least two instances when I apply filters to the polygons: hovering with your mouse, and when a tile is controlled by a player. In these instances the image in the polygon simply disappears.
I am using javascript to apply a CSS class that references an SVG definition in the same file as the polygon. This all works fine in Chrome.
Is there a way to fix this, or at the very least to work around this in Safari?
PHP/HTML
<svg>
<def>
<pattern id="someImage" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<image xlink:href="https://website.com/images/something.png" x="0" y="0" width="1" height="1"></image>
</pattern>
<filter id="hover" x="0" y="0">
<feColorMatrix in="SourceGraphic" type="matrix" values=" 0 1 0 0 .66 0 1 0 0 .66 0 1 0 0 .66 0 1 0 1 0 "></feColorMatrix>
</filter>
<filter id="red" x="0" y="0">
<feColorMatrix in="SourceGraphic" type="matrix" values=" 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 1 0 "></feColorMatrix>
</filter>
</def>
<g>
<polygon points="25,43 20,51 10,51 5,43 9,34 20,34" class="tileBackground redImage" fill="url(#someImage)”></polygon>
</g>
</svg>
CSS
.tile:hover .tileBackground {
filter: url(#hover);
}
.red {
fill: red;
}
.redImage {
filter: url(#red);
}
Image from Chrome Image from Safari
I think I included all the relevant code; let me know if something else would be useful.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: failed to create image decoder with message 'unimplemented'
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.