Firefox, Chrome: svg mask is missing in sprite symbol - html

Question

everyone!
I have some SVG image with mask (for expamle):
<svg width="173" height="173" viewBox="0 0 173 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask0_42_56" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="65" width="50" height="43">
<rect x="61" y="65" width="50" height="43" rx="12" fill="#C4C4C4"/>
</mask>
</defs>
<rect width="173" height="173" rx="16" fill="#F2F3F7"/>
<g opacity="0.5">
<g mask="url(#mask0_42_56)">
<rect x="61" y="65" width="50" height="43" rx="0" fill="#C4C4C4"/>
<path d="M100.062 80.3574C102.651 80.3574 104.75 78.2947 104.75 75.7502C104.75 73.2058 102.651 71.1431 100.062 71.1431C97.4736 71.1431 95.3749 73.2058 95.3749 75.7502C95.3749 78.2947 97.4736 80.3574 100.062 80.3574Z"
fill="#6C6C6C"/>
<path d="M99.3574 90.5753C98.0109 89.2622 95.8359 89.2336 94.4531 90.5101L82.875 101.207V111.071H108.656C109.951 111.071 111 110.048 111 108.786V101.929L99.3574 90.5753Z"
fill="#6C6C6C"/>
<path d="M104.75 111.071L78.0929 84.4931C76.6965 83.1008 74.441 83.0706 73.0069 84.424L61 95.7654V108.648C61 109.987 62.0877 111.071 63.4306 111.071H104.75Z"
fill="#6C6C6C"/>
</g>
</g>
</svg>
I wanna bundle all of svg images on my project in one svg-sprite. I use simple gulp script for this, a lot of images displayed correctly. But images who contain mask displayed without mask. Mask id and attributes with using mask id match. The root of the incorrect display just in than symbol doesn't see mask with this id.
I have solution for Firefox. Move mask tag with chilren from symbol tag in parent svg tag.
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="ara" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="65" width="50" height="43">
<rect x="61" y="65" width="50" height="43" rx="12" fill="#C4C4C4"/>
</mask>
</defs>
<symbol fill="none" viewBox="0 0 173 173" id="empty-cover" xmlns="http://www.w3.org/2000/svg">
<rect width="173" height="173" rx="16" fill="#F2F3F7"/>
<g mask="url(#ara)" opacity="0.5">
<rect x="61" y="65" width="50" height="43" rx="0" fill="#C4C4C4"/>
<path d="M100.062 80.357c2.589 0 4.688-2.062 4.688-4.607 0-2.544-2.099-4.607-4.688-4.607-2.588 0-4.687 2.063-4.687 4.607 0 2.545 2.099 4.607 4.687 4.607zM99.357 90.575a3.582 3.582 0 00-4.904-.065l-11.578 10.697v9.864h25.781c1.295 0 2.344-1.023 2.344-2.285v-6.857L99.357 90.575z"
fill="#6C6C6C"/>
<path d="M104.75 111.071L78.093 84.493a3.656 3.656 0 00-5.086-.069L61 95.765v12.883a2.426 2.426 0 002.43 2.423h41.32z"
fill="#6C6C6C"/>
</g>
</symbol>
This solution doesn't work for Chrome.
I tried to move mask to parent tag like in Firefox solution.
And I tried put mask to both places: root svg tag and symbol.