php - Is there a workaround for SVGs and filters not working Safari ← (PHP, JavaScript, CSS, HTML)

one text

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.