I have an SVG image inside an SVG g element that has a clipPath applied to to it. Though the clipPath renders correctly and as expected on Chrome and Safari only part of the image seems to appear on Firefox (I'm on Firefox version 88.0.1 - OSX)
Here is a link to a jsfiddle that recreates the problem
On Chrome it renders properly
On Firefox only part of the star renders
The other strange thing is that if I duplicate the path within the clipPath of the image seems to work in Firefox (jsfiddle example here) - which makes no sense to me.
<clipPath clipPathUnits="objectBoundingBox" id="clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127" transform="scale(0.005784982935153583 0.0038563296140941045)">
<path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
<path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
</clipPath>
Has anyone come across this before and knows whats happening here?