For the life of me, I cannot figure out the issue with the inside the following SVGs: https://codepen.io/LookyRo/pen/wvjezPE
.svgs-container {
display: flex;
gap: 10px;
text-align: center;
width: 100%;
}
.svgs-container div {
border: 2px solid red;
flex: 1 1 auto;
}
svg {
width: 250px;
}<div class="svgs-container">
<div>
<h1>Mask BAD</h1>
<svg id="eI1EGNfkb8r1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 300 300" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
style="background-color:#000">
<g transform="matrix(.984808 0.173648-.173648 0.984808-41.142952 21.499616)" mask="url(#eI1EGNfkb8r6)">
<g transform="translate(-.244181 1.646644)">
<path d="M107.295374,68.86121c-3.202847,15.480427-37.900356,59.25267-13.345196,66.725979s59.252668,9.074732,70.99644-3.736656s11.209963-46.441282-5.871887-46.441282-27.224199-4.804272-25.088968-24.021353-19.217082-30.960854-21.886121-19.75089s10.676157,18.149466-4.804268,27.224202Z"
transform="translate(-8.760641-5.488538)" fill="#5717d1" stroke="#3f5787" stroke-width="0.6"/>
<rect style="isolation:isolate" width="27.224199" height="154.804271" rx="0" ry="0"
transform="matrix(.866025 0.5-.5 0.866025 243.998411-43.500831)" fill="#d2dbed" stroke-width="0"/>
</g>
<mask id="eI1EGNfkb8r6" mask-type="luminance">
<path d="M107.295374,68.86121c-3.202847,15.480427-37.900356,59.25267-13.345196,66.725979s59.252668,9.074732,70.99644-3.736656s11.209963-46.441282-5.871887-46.441282-27.224199-4.804272-25.088968-24.021353-19.217082-30.960854-21.886121-19.75089s10.676157,18.149466-4.804268,27.224202Z"
transform="matrix(-.865792 1.16328-.884732-.658478 328.565567-28.974333)" fill="#e34242"
stroke-width="0.6"/>
</mask>
</g>
</svg>
</div>
<div>
<h1>Mask GOOD</h1>
<svg id="em67u90McsE1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 300 300" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
style="background-color:#000">
<g transform="matrix(.984808 0.173648-.173648 0.984808-41.142952 21.499616)" mask="url(#em67u90McsE6)">
<g transform="translate(-.244181 1.646644)">
<path d="M107.295374,68.86121c-3.202847,15.480427-37.900356,59.25267-13.345196,66.725979s59.252668,9.074732,70.99644-3.736656s11.209963-46.441282-5.871887-46.441282-27.224199-4.804272-25.088968-24.021353-19.217082-30.960854-21.886121-19.75089s10.676157,18.149466-4.804268,27.224202Z"
transform="translate(-8.760641-5.488538)" fill="#5717d1" stroke="#3f5787" stroke-width="0.6"/>
<rect style="isolation:isolate" width="27.224199" height="154.804271" rx="0" ry="0"
transform="matrix(.866025 0.5-.5 0.866025 243.013603-43.327183)" fill="#d2dbed" stroke-width="0"/>
</g>
<mask id="em67u90McsE6" mask-type="luminance">
<path d="M107.295374,68.86121c-3.202847,15.480427-37.900356,59.25267-13.345196,66.725979s59.252668,9.074732,70.99644-3.736656s11.209963-46.441282-5.871887-46.441282-27.224199-4.804272-25.088968-24.021353-19.217082-30.960854-21.886121-19.75089s10.676157,18.149466-4.804268,27.224202Z"
transform="matrix(-.865792 1.16328-.884732-.658478 328.565567-28.974333)" fill="#e34242"
stroke-width="0.6"/>
</mask>
</g>
</svg>
</div>
</div>The left one renders the elements inside the masked group and slightly casts a shadow where the mask should be. The right one works correctly. I am seeing this issue un Chrome & Edge, yet Firefox, Opera and Safari displays both of this the same.
The only difference between these 2 SVGs is that the element is slightly moved on the X axis.
Bad: matrix(.866025 0.5-.5 0.866025 243.998411-43.500831)
Good: matrix(.866025 0.5-.5 0.866025 243.013603-43.327183)
All the rest of the code is exactly the same.
Can anyone figure this out?