Safari moving part of SVG - html

I have a compass SVG which I an animating with CSS. It works fine in Chrome and other browsers, but in Safari, the needle in the compass moves left.
But if i refresh the DOM by unchecking and checking one of the needle's css properties, it works fine.
svg {
height: 124px;
}
.rim {
fill: #D291BC;
}
.needle {
transform-origin: 50% 50%;
transform-box: fill-box;
/* offset of 45 degrees, for 90, do 90 - 45 */
transform: rotate( 70deg );
}
<svg viewBox="0 0 155 208" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M9.4,14.6666667 L28.8333333,14.6666667 C29.9379028,14.6666667 30.8333333,15.5620972 30.8333333,16.6666667 L30.8333333,31 C30.8333333,32.1045695 29.9379028,33 28.8333333,33 L9.4,33 C8.2954305,33 7.4,32.1045695 7.4,31 L7.4,16.6666667 C7.4,15.5620972 8.2954305,14.6666667 9.4,14.6666667 Z" id="path-1"></path>
<filter x="-19.2%" y="-24.5%" width="138.4%" height="149.1%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="-6" dy="-9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<rect id="path-3" x="0" y="0" width="37" height="18.3333333" rx="2"></rect>
<filter x="-12.2%" y="-24.5%" width="124.3%" height="149.1%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="-6" dy="-9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.81
0 0 0 0 0.81
0 0 0 0 0.81
0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-5" cx="75.5" cy="76" rx="75.5" ry="76"></ellipse>
<filter x="-9.6%" y="-9.5%" width="119.2%" height="119.1%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="-26" dy="-26" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.19
0 0 0 0 0.52
0 0 0 0 0.737
0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-7" cx="75.9389535" cy="76.4418605" rx="63.6482558" ry="64.0697674"></ellipse>
<filter x="-3.9%" y="-3.9%" width="107.9%" height="107.8%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="-7" dy="-7" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.855521896 0 0 0 0 0.855521896 0 0 0 0 0.855521896 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<path d="M14.7893062,20.7478577 L46.4425703,31.6777537 C47.4866481,32.0382745 48.0407805,33.1769267 47.6802596,34.2210045 C47.4822328,34.7944955 47.0345834,35.2470908 46.463303,35.4514071 L14.7919819,46.778537 C14.3619812,46.9323252 13.8922996,46.9343238 13.4610057,46.7842006 L-18.1923297,35.7664264 C-19.2355111,35.4033198 -19.7868206,34.2632981 -19.4237139,33.2201167 C-19.2242702,32.647128 -18.7755125,32.1956483 -18.2037404,31.9927431 L13.467652,20.7534914 C13.8948358,20.6018964 14.3608456,20.5999099 14.7893062,20.7478577 Z" id="path-9"></path>
<filter x="-5.9%" y="-15.2%" width="111.9%" height="130.5%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="1" dy="8" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.810400723 0 0 0 0 0.200090062 0 0 0 0 0.274595959 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-11" cx="74.8284884" cy="76.8604651" rx="4.82848837" ry="4.86046512"></ellipse>
<filter x="-36.2%" y="-36.0%" width="172.5%" height="172.0%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="-4" dy="-4" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-10-Copy-5" transform="translate(2.000000, 2.000000)" fill-rule="nonzero">
<path d="M76.5,55 C61.3121694,55 49,42.6878306 49,27.5 C49,12.3121694 61.3121694,0 76.5,0 C91.6878306,0 104,12.3121694 104,27.5 C104,42.6878306 91.6878306,55 76.5,55 Z M76.5,48 C87.8218374,48 97,38.8218374 97,27.5 C97,16.1781626 87.8218374,7 76.5,7 C65.1781626,7 56,16.1781626 56,27.5 C56,38.8218374 65.1781626,48 76.5,48 Z" id="Combined-Shape" stroke="#124458" stroke-width="3" fill="#D8D8D8" stroke-linecap="round" stroke-linejoin="round"></path>
<g id="Group-8" transform="translate(57.000000, 28.000000)">
<g id="Group-6">
<g id="Rectangle-9">
<use fill="#E8E8E8" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#124458" stroke-width="3" d="M9.4,16.1666667 C9.12385763,16.1666667 8.9,16.3905243 8.9,16.6666667 L8.9,31 C8.9,31.2761424 9.12385763,31.5 9.4,31.5 L28.8333333,31.5 C29.1094757,31.5 29.3333333,31.2761424 29.3333333,31 L29.3333333,16.6666667 C29.3333333,16.3905243 29.1094757,16.1666667 28.8333333,16.1666667 L9.4,16.1666667 Z" stroke-linejoin="square"></path>
</g>
<g id="Rectangle-9-Copy">
<use fill="#E8E8E8" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<rect stroke="#124458" stroke-width="3" stroke-linejoin="square" x="1.5" y="1.5" width="34" height="15.3333333" rx="2"></rect>
</g>
</g>
<g id="Group-7" transform="translate(6.166667, 1.783784)" stroke="#124458" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1.87781955,0.624324324 L1.87781955,5.61891892" id="Line-3"></path>
<path d="M7.76981857,0.624324324 L7.76981857,5.61891892" id="Line-3-Copy"></path>
<path d="M15.2810968,0.624324324 L15.2810968,5.61891892" id="Line-3-Copy-2"></path>
<path d="M22.792375,0.624324324 L22.792375,5.61891892" id="Line-3-Copy-3"></path>
</g>
<g id="Group-7" transform="translate(6.166667, 12.486486)" stroke="#124458" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1.87781955,0.535135135 L1.87781955,4.81621622" id="Line-3"></path>
<path d="M7.82424812,0.535135135 L7.82424812,4.81621622" id="Line-3-Copy"></path>
<path d="M15.3355263,0.535135135 L15.3355263,4.81621622" id="Line-3-Copy-2"></path>
<path d="M22.8468045,0.535135135 L22.8468045,4.81621622" id="Line-3-Copy-3"></path>
</g>
</g>
<g id="Group-9" transform="translate(0.000000, 52.000000)">
<g id="Group-5">
<g id="Oval-6">
<use xlink:href="#path-5"></use>
<use class="rim" fill-opacity="1" xlink:href="#path-5"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-5"></use>
</g>
<g id="Oval-6">
<use fill="#F6F6F6" xlink:href="#path-7"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-7"></use>
</g>
<ellipse id="Oval" fill="#FFFFFF" transform="translate(54.837645, 47.762128) rotate(-40.000000) translate(-54.837645, -47.762128) " cx="54.8376446" cy="47.7621279" rx="25.4593023" ry="15.4651163"></ellipse>
<ellipse id="Oval-Copy" fill="#FFFFFF" transform="translate(37.311047, 86.263018) rotate(-40.000000) translate(-37.311047, -86.263018) " cx="37.3110465" cy="86.2630178" rx="11.7827655" ry="12.6739538"></ellipse>
<path d="M74.622093,20.1649049 L74.622093,13.4164905 M103.661734,27.6663352 L107.035941,21.8220369 M123.496456,47.640592 L129.340754,44.2663848 M130.94556,76.8837209 L137.693975,76.8837209 M123.496456,104.359408 L129.340754,107.733615 M103.661734,125.217386 L107.035941,131.061684 M74.622093,132.718816 L74.622093,139.46723 M47.3382664,125.217386 L43.9640592,131.061684 M27.5035445,104.359408 L21.6592462,107.733615 M20.0544397,76.8837209 L13.3060254,76.8837209 M27.5035445,47.640592 L21.6592462,44.2663848 M47.3382664,27.6663352 L43.9640592,21.8220369" id="Line-2" stroke="#124458" stroke-width="3" stroke-linecap="round"></path>
</g>
<g class="needle" :style="style">
<g id="Group-8-Copy" transform="translate(75.000000, 76.500000) rotate(44.000000) translate(-75.000000, -76.500000) translate(61.000000, 42.000000)">
<g id="Rectangle-9-Copy" transform="translate(14.127461, 33.766841) rotate(90.000000) translate(-14.127461, -33.766841) ">
<use fill="#FF5963" xlink:href="#path-9"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<path stroke="#124458" stroke-width="3" d="M14.2997206,22.1657103 C14.1926055,22.1287234 14.076103,22.12922 13.9693071,22.1671187 L-17.7020853,33.4063704 C-17.8450284,33.4570967 -17.9572178,33.5699666 -18.0070787,33.7132138 C-18.0978554,33.9740092 -17.960028,34.2590146 -17.6992327,34.3497912 L13.9541027,45.3675654 C14.0619262,45.4050962 14.1793466,45.4045965 14.2868468,45.3661495 L45.9581679,34.0390196 C46.100988,33.9879405 46.2129003,33.8747917 46.262407,33.731419 C46.3525373,33.4703995 46.2140042,33.1857365 45.9529847,33.0956062 L14.2997206,22.1657103 Z" stroke-linejoin="square"></path>
</g>
<path d="M-0.526379321,40.5375395 C-0.578879271,40.5194112 -0.634032823,40.510157 -0.68957451,40.510157 C-0.965716885,40.510157 -1.18957451,40.7340147 -1.18957451,41.010157 L-1.18957451,61.8611801 C-1.18957451,61.9185663 -1.17969553,61.9755241 -1.16037035,62.0295585 C-1.06737754,62.2895718 -0.781209497,62.4249688 -0.521196134,62.3319759 L29.1411004,51.7233662 C29.2839205,51.6722871 29.3958328,51.5591383 29.4453395,51.4157656 C29.5354698,51.1547461 29.3969367,50.8700831 29.1359172,50.7799529 L-0.526379321,40.5375395 Z" id="Rectangle-9-Copy" stroke="#124458" stroke-width="3" fill="#124458" transform="translate(14.141846, 51.435941) rotate(90.000000) translate(-14.141846, -51.435941) "></path>
</g>
</g>
<g id="Oval-6" stroke-linecap="round" stroke-linejoin="round">
<use fill="#E8E8E8" xlink:href="#path-11"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-11"></use>
</g>
</g>
</g>
</g>
</svg>
I read that transform-box: fill-box; should have fixed it on safari but didnt. I am setting the origin to transform-origin: 50% 50%; But Safari doesn't listen to that until the DOM refreshes.
jsfiddle
Side note I know the needle is off by 45 degrees but thats fine. I just have to minus 45 from whatever degree im trying to show


It seems transform-box: fill-box; is bugged on safari when trying to transform it too.
As a temporary but not that bad fix, I just used pixel amounts
transform-origin: 75px 75px;

Related

Error, fixed container not succesfull using Css and Bootstrap

I have a problem with the fixed property of css. When I apply it to my container with id="avatar", it "disappears"(As shown in the picture)
the div with the classes col-md-5 col-sm-12 order-1 order-md-0 contains all items on the left side.
The goal is that all the items on the left side can scroll and the avatar on the right side remains "fixed". But, I have not succeeded, what am I failing?
#main {
position: sticky;
top: 2px;
bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col-md-5 col-sm-12 order-1 order-md-0">
<div class="row"></div>
<div class="row justify-content-center"></div>
<div id="imagesDiv"></div>
</div>
<div id="avatar" class="col-md-7 col-sm-12 order-0 order-md-1">
<main id="main" class="mx-auto">
<svg viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="react-path-1" cx="120" cy="120" r="120"></circle>
<path d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z" id="react-path-2"></path>
<path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="react-path-3"></path>
</defs>
<g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle">
<g transform="translate(825.000000, 1100.000000)">
<g id="background"></g>
<g id="Mask"></g>
<g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-5)">
<g id="Body" transform="translate(32.000000, 36.000000)">
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-6" fill="white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use></mask>
<use xmlns="http://www.w3.org/2000/svg" fill="#D0C6AC" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use>
<g class="color-picker-Body" mask="url(#react-mask-6)" fill="#FD9841">
<g transform="translate(0.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="264" height="280"></rect>
</g>
</g>
<path xmlns="http://www.w3.org/2000/svg" d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#react-mask-6)"></path>
</g>
<g id="Clothing" transform="translate(0.000000, 170.000000)"><path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="#B7C1DB"></path>
<mask id="mask0_0_366" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="14" width="200" height="96">
<path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="white"></path>
</mask>
<g mask="url(#mask0_0_366)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M102 63.3365C99.5284 62.4949 97.1884 61.5523 95 60.5196V110H102V63.3365ZM162 63.3365C164.472 62.4949 166.812 61.5523 169 60.5196V98.5C169 100.433 167.433 102 165.5 102C163.567 102 162 100.433 162 98.5V63.3365Z" fill="#F4F4F4"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M132 68C162.928 68 188 54.5686 188 38C188 28.137 179.115 19.3856 165.4 13.9175C185.194 18.941 198.5 28.2929 198.5 39C198.5 55.0163 168.727 68 132 68ZM98.6004 13.9175C84.8847 19.3856 76 28.137 76 38C76 54.5686 101.072 68 132 68C95.2731 68 65.5 55.0163 65.5 39C65.5 28.2929 78.806 18.941 98.6004 13.9175Z" fill="black" fill-opacity="0.16"></path>
</g></g>
<g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000">
<g id="eyes" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964"><circle cx="30" cy="22" r="14" fill="white"></circle>
<circle cx="82" cy="22" r="14" fill="white"></circle>
<circle class="eyesColor" cx="30" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
<circle class="eyesColor" cx="82" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
</g>
<g id="eyeBrow" fill-opacity="0.599999964"><g xmlns="http://www.w3.org/2000/svg" fill-opacity="0.599999964">
<g id="I-Browse" transform="translate(0.000000, 0.000000)">
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M26.5473 6.1484C20.7403 6.41665 11.3522 10.6363 11.5941 16.4922C11.6021 16.6839 11.8836 16.768 12.0211 16.6206C14.776 13.6613 34.3365 10.6709 41.2261 12.2556C41.8566 12.4008 42.3356 11.7788 41.9363 11.3294C38.5142 7.48119 31.7498 5.90302 26.5473 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M86.4526 6.1484C92.2596 6.41665 101.648 10.6363 101.406 16.4922C101.398 16.6839 101.116 16.768 100.979 16.6206C98.2238 13.6613 78.6634 10.6709 71.7738 12.2556C71.1433 12.4008 70.6642 11.7788 71.0636 11.3294C74.4857 7.48119 81.2501 5.90302 86.4526 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
</g>
</g>
</g>
<g id="mouth"><g transform="translate(0.000000, 50.000000)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="black" fill-opacity="0.7"></path>
<mask id="mask0_0_636" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="13" width="38" height="19">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="white"></path>
</mask>
</g>
</g>
<g id="nose"><g xmlns="http://www.w3.org/2000/svg" id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
<path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose"></path>
</g></g>
<g id="beard"></g>
</g>
<g id="TopA" stroke-width="1" fill-rule="evenodd"><defs xmlns="http://www.w3.org/2000/svg">
<rect id="react-path-197" x="0" y="0" width="264" height="280"></rect>
<path d="M180.14998,39.9204083 C177.390206,37.1003988 174.185913,34.7068297 171.069252,32.3065503 C170.381566,31.777442 169.682843,31.2610833 169.010544,30.7118441 C168.857687,30.5870323 167.291999,29.4657388 167.104691,29.0530544 C166.653816,28.0602634 166.915042,28.8332916 166.977255,27.6485857 C167.055857,26.150508 170.11064,21.9193194 167.831176,20.9490079 C166.828413,20.522232 165.039628,21.6579526 164.077671,22.0330592 C162.196235,22.7671676 160.291721,23.3932399 158.346734,23.9330847 C159.278588,22.0763407 161.055333,18.3594977 157.71591,19.3543018 C155.114345,20.1293431 152.690052,22.1219709 150.075777,23.0594018 C150.940735,21.6415124 154.399901,17.2479341 151.274209,17.0023366 C150.301549,16.925839 147.471201,18.7503735 146.423952,19.1395717 C143.287223,20.3054888 140.083264,21.0590571 136.789999,21.6525844 C125.59203,23.6707114 112.497238,23.0953019 102.1368,28.1934632 C94.1494796,32.1236942 86.262502,38.2220278 81.648386,45.987539 C77.2011742,53.472559 75.537818,61.6641751 74.6069673,70.2412987 C73.9239644,76.535909 73.8684412,83.0425652 74.1878671,89.3599905 C74.2922241,91.4297869 74.5250203,100.970847 77.5319724,98.0813859 C79.0300967,96.641688 79.019059,90.8282073 79.3963495,88.8604076 C80.1472513,84.9452748 80.870057,81.0126951 82.122006,77.2227096 C84.3282191,70.5439339 86.9307879,63.4296587 92.4269209,58.8297383 C95.9539853,55.8782066 98.4307906,51.8889248 101.806002,48.9112229 C103.322188,47.5738572 102.165231,47.7130963 104.602902,47.888571 C106.240504,48.006337 107.885464,48.0512961 109.52641,48.0942421 C113.322394,48.1928837 117.124399,48.16772 120.921387,48.1811407 C128.56821,48.208653 136.179243,48.316689 143.818708,47.9164188 C147.213653,47.7385955 150.617965,47.6423024 154.00388,47.3282597 C155.895349,47.152785 159.251496,45.9405668 160.808488,46.8669256 C162.233362,47.7144383 163.71309,50.4817719 164.736257,51.615144 C167.153525,54.2935659 170.035717,56.3392052 172.862385,58.5354911 C178.756547,63.114945 181.732392,68.8666908 183.522515,76.023241 C185.305949,83.1532854 184.805905,89.76815 187.013456,96.78479 C187.401784,98.0184813 188.428965,100.14498 189.695296,98.2389151 C189.930434,97.8849461 189.869559,95.9390277 189.869559,94.819339 C189.869559,90.2995934 191.014141,86.9083772 190.999758,82.3591197 C190.943566,68.5271489 190.49637,50.4908308 180.14998,39.9204083 Z" id="react-path-196"></path>
<filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox" id="react-filter-193">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge>
</filter>
</defs>
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-195" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-197"></use>
</mask>
<g xmlns="http://www.w3.org/2000/svg" id="Mask"></g>
<g xmlns="http://www.w3.org/2000/svg" mask="url(#react-mask-195)">
<g transform="translate(-1.000000, 0.000000)">
<mask id="react-mask-194" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-196"></use>
</mask>
<g id="hair"><g xmlns="http://www.w3.org/2000/svg" id="Hairstyle/Wick" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="template-for-hairstyles" opacity=".184" transform="translate(1.000000, 0.000000)">
<mask id="hairstylewick-mask-2" fill="#ffffff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hairstylewick-path-1" fill="#ffffff"></use>
</mask>
<g id="Mask-Hair"></g>
</g>
<g id="Wick" transform="translate(64.000000, 22.300000)">
<path class="hairColor" d="M13.4413,160.16 C13.4413,160.16 12.3963,166.909 9.2623,170.681 C9.2623,170.681 19.7343,171.586 24.6553,166.711 C24.6553,166.711 24.2473,171.575 22.2033,175.347 C22.2033,175.347 29.0143,176.459 35.8253,171.436 C35.8253,171.436 35.8793,174.352 35.9233,176.809 C37.5833,176.694 39.2523,176.615 40.9413,176.615 L44.9413,176.615 L44.9413,157.226 C27.7043,149.038 15.3133,132.303 13.2463,112.496 C9.2963,111.938 5.9703,109.454 4.2343,106.027 L4.2343,147.355 C4.2343,147.355 4.0873,160.457 0.0003,164.329 C0.0003,164.329 8.9013,166.016 13.4413,160.16" id="Fill-4" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M133.5829,106.1463 C131.8309,109.5103 128.5389,111.9453 124.6359,112.4973 C122.5689,132.3023 110.1799,149.0373 92.9419,157.2263 L92.9409,176.6153 L96.9409,176.6153 C98.6079,176.6153 100.2559,176.6923 101.8949,176.8033 C101.9369,174.3503 101.9919,171.4363 101.9919,171.4363 C108.8029,176.4593 115.6129,175.3463 115.6129,175.3463 C113.5699,171.5753 113.1619,166.7103 113.1619,166.7103 C118.0819,171.5853 128.5549,170.6813 128.5549,170.6813 C125.4219,166.9093 124.3759,160.1603 124.3759,160.1603 C128.9159,166.0163 137.8169,164.3293 137.8169,164.3293 C133.7299,160.4573 133.5829,147.3553 133.5829,147.3553 L133.5829,106.1463 Z" id="Fill-6" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M112.3837,61.411 C112.3837,61.411 120.1617,65.499 120.1617,83.616 C120.1617,83.616 124.3837,87.112 124.3837,83.616 L124.3837,75.781 C124.3837,75.781 130.3097,75.942 133.5907,82.208 L133.5907,38.526 C133.5907,38.526 94.0077,-1.068 84.5637,0.022 C75.3547,1.084 69.2147,5.932 68.9127,6.174 C68.6107,5.932 62.4697,1.084 53.2617,0.022 C43.8177,-1.068 4.2347,38.526 4.2347,38.526 L4.2347,82.208 C7.5157,75.942 13.4417,75.781 13.4417,75.781 L13.4417,83.616 C13.4417,87.112 17.6627,83.616 17.6627,83.616 C17.6627,65.499 25.4417,61.411 25.4417,61.411 C25.4417,61.411 14.5857,56.099 34.1907,36.891 C53.1187,18.347 67.8857,33.575 68.8837,34.649 C68.8837,34.649 84.7057,18.347 103.6337,36.891 C123.2387,56.099 112.3837,61.411 112.3837,61.411" id="Fill-1" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M92.9423,157.2264 L92.9413,170.5254 C118.7923,158.6644 123.6873,127.9354 124.5233,113.4234 C122.1713,132.8224 109.9093,149.1654 92.9423,157.2264" id="Fill-8" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M13.4716,114.3524 C14.2416,129.2804 19.1006,159.2004 44.9416,170.6934 L44.9416,157.2264 C28.2446,149.2944 16.0966,133.3444 13.4716,114.3524" id="Fill-10" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
</g>
</g></g>
<g id="glass">
<g filter="url(#filter0_d_0_1711)" transform="translate(60.000000, 75.000000)">
<path d="M70.9998 13.1111C59.9624 13.1111 58.3704 4.0266 35.6704 2.74074C12.9854 1.7168 5.81505 8.44949 5.7763 13.1111C5.81307 17.4043 4.64754 28.5613 19.3645 41.6296C34.1366 57.1421 49.2702 51.8818 54.6939 46.8148C60.135 44.4731 66.3402 23.4596 70.9998 23.4815C75.6595 23.5033 81.8646 44.4731 87.3057 46.8148C92.7294 51.8818 107.863 57.1421 122.635 41.6296C137.352 28.5613 136.187 17.4043 136.223 13.1111C136.185 8.44949 129.014 1.7168 106.329 2.74074C83.6293 4.0266 82.0373 13.1111 70.9998 13.1111Z" fill="#F4F4F4"></path>
<path d="M60.1293 23.4815C60.5103 15.8233 47.2156 7.64243 32.9529 7.92593C18.6973 8.22451 16.8417 17.3787 16.647 20.8889C16.2981 29.0221 25.0144 47.3038 41.1058 46.8148C57.1972 46.3058 59.9092 28.5344 60.1293 23.4815Z" fill="#2F383B"></path>
<path d="M81.8707 23.4815C81.4897 15.8233 94.7844 7.64243 109.047 7.92593C123.303 8.22451 125.158 17.3787 125.353 20.8889C125.702 29.0221 116.986 47.3038 100.894 46.8148C84.8028 46.3058 82.0908 28.5344 81.8707 23.4815Z" fill="#2F383B"></path>
</g>
<defs>
<filter id="filter0_d_0_1711" x="5.76709" y="2.63634" width="130.465" height="51.3032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
<feOffset dy="2"></feOffset>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"></feColorMatrix>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1711"></feBlend>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1711" result="shape"></feBlend>
</filter>
</defs>
</g>
<g id="hat"></g>
<g id="beard"></g>
</g>
</g></g>
</g></g></g></g>
</svg>
</main>
</div>
</div>

Masked svg element not showing whole svg item

In this example I am trying to scroll a masked container item using transform: translate and animation: infinite.
Problem is that only a small partition of the masked container item is scrolling. How would I get it scrolling as it does in the imgur link below?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
margin: 20px;
}
#code-main {
animation: code 3s infinite;
}
#keyframes code {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 150px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<svg width="712" height="670" viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector" d="M516.326 380.047V565.042L547.27 615.472L549.625 619.308H671.722L674.189 380.047H516.326Z" fill="#E6E6E6"/>
<path id="Vector_2" opacity="0.1" d="M516.326 380.047V565.042L547.27 615.472L549.169 380.047H516.326Z" fill="black"/>
<path id="Vector_3" d="M221.566 375.113V560.109L190.622 610.539L188.267 614.374H66.17L63.703 375.113H221.566Z" fill="#E6E6E6"/>
<path id="Vector_4" opacity="0.1" d="M221.566 375.113V560.109L190.622 610.539L188.723 375.113H221.566Z" fill="black"/>
<path id="Vector_5" d="M711.188 371.414V382.513H47.67V366.48L109.335 334.414H656.923L711.188 371.414Z" fill="#E6E6E6"/>
<path id="Vector_6" opacity="0.1" d="M711.188 371.414V382.513H47.67V366.48L711.188 371.414Z" fill="black"/>
<path id="Vector_7" d="M142.635 426.912H113.035L100.702 418.279H156.201L142.635 426.912Z" fill="#3F3D56"/>
<path id="Vector_8" d="M142.635 462.678H113.035L100.702 454.045H156.201L142.635 462.678Z" fill="#3F3D56"/>
<path id="Vector_9" d="M142.635 513.244H113.035L100.702 504.61H156.201L142.635 513.244Z" fill="#3F3D56"/>
<path id="Vector_10" d="M142.635 563.809H113.035L100.702 555.176H156.201L142.635 563.809Z" fill="#3F3D56"/>
<path id="Vector_11" d="M595.257 431.845H624.857L637.19 423.212H581.691L595.257 431.845Z" fill="#3F3D56"/>
<path id="Vector_12" d="M595.257 467.611H624.857L637.19 458.978H581.691L595.257 467.611Z" fill="#3F3D56"/>
<path id="Vector_13" d="M595.257 518.177H624.857L637.19 509.544H581.691L595.257 518.177Z" fill="#3F3D56"/>
<path id="Vector_14" d="M595.257 568.742H624.857L637.19 560.109H581.691L595.257 568.742Z" fill="#3F3D56"/>
<path id="Vector_15" d="M490.821 127.605C491.695 127.605 492.403 126.897 492.403 126.023C492.403 125.149 491.695 124.44 490.821 124.44C489.947 124.44 489.239 125.149 489.239 126.023C489.239 126.897 489.947 127.605 490.821 127.605Z" fill="#F2F2F2"/>
<path id="Vector_16" d="M490.821 300.387C494.142 300.387 496.834 297.695 496.834 294.374C496.834 291.053 494.142 288.362 490.821 288.362C487.5 288.362 484.809 291.053 484.809 294.374C484.809 297.695 487.5 300.387 490.821 300.387Z" fill="#F2F2F2"/>
<path id="Vector_17" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981L315.632 346.589H477.971L481.452 357.981Z" fill="#3F3D56"/>
<path id="Vector_18" d="M546.97 354.883C546.659 356.208 545.489 357.607 542.843 358.93C533.35 363.677 514.046 357.664 514.046 357.664C514.046 357.664 499.173 355.133 499.173 348.487C499.59 348.201 500.026 347.942 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="#3F3D56"/>
<path id="Vector_19" opacity="0.1" d="M546.97 354.883C535.35 359.335 524.992 359.667 514.363 352.284C510.343 349.313 505.476 347.71 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="black"/>
<path id="Vector_20" d="M532.4 352.284C534.672 352.284 536.514 351.718 536.514 351.019C536.514 350.32 534.672 349.753 532.4 349.753C530.128 349.753 528.286 350.32 528.286 351.019C528.286 351.718 530.128 352.284 532.4 352.284Z" fill="#F2F2F2"/>
<path id="Vector_21" opacity="0.1" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981H481.452Z" fill="black"/>
<path id="Vector_22" d="M94.6615 0.0286924C92.9336 -0.113172 91.2035 0.273333 89.7002 1.13699C88.2242 2.14779 87.2939 3.91861 86.3443 5.56646C82.7136 11.9421 77.7985 17.4942 71.9101 21.8711C67.6211 25.0131 62.1684 28.9308 62.9022 34.7238C63.2893 36.6369 63.996 38.4711 64.9927 40.1493C68.9493 48.1363 79.7463 54.3086 78.6843 63.4224C82.6153 56.8415 77.3573 53.5874 81.2883 47.0065C83.1604 43.8725 86.4124 40.3348 89.2388 42.303C90.1852 42.962 90.8066 44.1439 91.792 44.7222C94.1432 46.1019 96.6446 43.4642 98.7259 41.5958C105.903 35.1532 116.109 36.841 125.04 38.8484C129.256 39.7961 133.887 41.0394 136.379 45.0691C139.656 50.3673 133.266 56.0894 131.651 62.0796C131.52 62.59 131.513 63.1248 131.633 63.6381C131.753 64.1514 131.996 64.6281 132.34 65.0273C132.684 65.4266 133.12 65.7365 133.61 65.9305C134.1 66.1246 134.63 66.1971 135.154 66.1417C137.834 65.8774 141.009 65.6607 141.167 64.4848C144.539 64.6048 148.67 64.223 150.114 60.7123C150.556 59.3233 150.789 57.8765 150.807 56.4191C151.337 50.5219 153.84 45.1419 155.498 39.5292C157.156 33.9164 157.877 27.3387 155.079 22.3624C154.08 20.7067 152.845 19.2057 151.413 17.9068C135.534 2.54006 114.657 0.00588238 94.6615 0.0286924Z" fill="#2F2E41"/>
<path id="Vector_23" d="M82.1377 74.9337C82.1377 74.9337 85.5911 103.712 72.9286 106.014C60.2661 108.317 84.4399 147.455 84.4399 147.455L141.997 154.362L128.183 108.317C128.183 108.317 118.974 104.863 124.73 81.8406C130.485 58.8178 82.1377 74.9337 82.1377 74.9337Z" fill="#FFB8B8"/>
<path id="Vector_24" d="M47.028 569.347L51.633 632.66H75.806L68.9 569.347H47.028Z" fill="#FFB8B8"/>
<path id="Vector_25" d="M224.303 449.629L227.756 502.581L254.233 491.07L243.872 447.327L224.303 449.629Z" fill="#FFB8B8"/>
<path id="Vector_26" d="M29.761 327.608C29.761 327.608 30.9121 394.374 37.819 416.246C44.7259 438.117 43.5747 439.268 42.4236 442.722C41.2724 446.175 40.1213 443.873 40.1213 449.629C40.1213 455.384 37.819 546.324 40.1213 554.382C42.4235 562.44 33.2145 576.254 40.1213 577.405C47.0281 578.556 79.2599 577.405 80.411 570.498C81.5622 563.591 71.202 561.289 75.8065 556.684C80.4111 552.08 87.3179 457.687 87.3179 457.687L103.434 392.072L133.363 357.538H196.676L216.245 433.513C216.245 433.513 208.187 455.384 213.943 455.384C219.699 455.384 254.233 462.291 254.233 436.966C254.233 411.641 242.721 336.817 240.419 334.515C238.117 332.213 241.57 324.155 238.117 320.701C234.663 317.248 194.374 293.074 179.409 288.47C164.444 283.865 143.451 278.385 143.451 278.385L29.761 327.608Z" fill="#2F2E41"/>
<path id="Vector_27" d="M254.233 481.86C254.233 481.86 236.966 476.105 228.908 493.372C220.85 510.639 224.303 515.243 224.303 515.243C224.303 515.243 250.779 524.452 255.384 519.848C257.387 517.845 263.748 517.149 270.296 517.002C280.269 516.778 282.923 502.668 273.504 499.383C273.223 499.285 272.939 499.2 272.651 499.127C263.442 496.825 254.233 481.86 254.233 481.86Z" fill="#2F2E41"/>
<path id="Vector_28" d="M108.038 93.9275C127.111 93.9275 142.572 78.4661 142.572 59.3934C142.572 40.3208 127.111 24.8593 108.038 24.8593C88.9656 24.8593 73.5042 40.3208 73.5042 59.3934C73.5042 78.4661 88.9656 93.9275 108.038 93.9275Z" fill="#FFB8B8"/>
<path id="Vector_29" d="M63.144 120.404C63.144 120.404 119.55 131.915 133.363 113.497C147.177 95.0786 152.933 165.298 152.933 165.298L159.839 238.971L149.479 279.26C149.479 279.26 95.3758 323.004 78.1087 326.457C60.8417 329.91 34.3655 332.213 34.3655 332.213C34.3655 332.213 42.4236 204.437 42.4236 202.134C42.4236 199.832 63.144 120.404 63.144 120.404Z" fill="#6C63FF"/>
<path id="Vector_30" d="M80.2983 98.8144C80.2983 98.8144 67.7485 91.6252 64.2951 98.532C60.8417 105.439 28.6099 122.706 25.1565 122.706C21.7031 122.706 32.0633 218.25 27.4587 229.762C22.8542 241.273 0.982611 325.306 13.6451 332.213C26.3076 339.119 17.0985 325.306 29.761 342.573C42.4235 359.84 104.585 359.84 108.038 352.933C111.492 346.026 80.411 294.225 86.1667 245.877C91.9224 197.53 101.131 130.764 93.0735 121.555C85.0156 112.346 80.2983 98.8144 80.2983 98.8144Z" fill="#2F2E41"/>
<path id="Vector_31" d="M121.852 106.59L123.455 101.072C123.455 101.072 171.351 116.95 173.653 127.31C175.955 137.671 174.804 210.192 166.746 215.948C158.688 221.704 147.177 230.913 155.235 244.726C163.293 258.54 172.502 273.505 179.409 274.656C186.316 275.807 198.978 283.865 195.525 291.923C192.071 299.981 150.63 285.016 150.63 285.016C150.63 285.016 123.003 264.296 124.154 232.064C125.305 199.832 121.852 106.59 121.852 106.59Z" fill="#2F2E41"/>
<path id="Vector_32" d="M162.142 242.424L134.514 294.225C134.514 294.225 94.2246 335.666 117.247 340.271C140.27 344.875 152.933 302.283 152.933 302.283L182.862 259.691L162.142 242.424Z" fill="#FFB8B8"/>
<path id="Vector_33" d="M96.3438 9.06446C94.9518 8.96132 93.5575 9.23175 92.3051 9.8478C91.1726 10.6749 90.2393 11.7445 89.5733 12.9785C86.5029 17.5971 82.5005 21.5224 77.8232 24.5025C74.3318 26.7233 69.893 29.4922 70.4904 33.5867C70.8146 34.9595 71.3917 36.2599 72.1922 37.4214C75.4241 43.1236 76.7108 49.7234 75.8574 56.2221L85.4575 42.2681C86.9814 40.053 89.6287 37.5526 91.9296 38.9437C92.6999 39.4095 93.2058 40.2449 94.0079 40.6535C95.9219 41.6287 97.9581 39.7644 99.6524 38.4439C105.495 33.8903 113.803 35.0832 121.073 36.502C124.505 37.1718 128.275 38.0506 130.304 40.8987C133.676 45.6319 130.155 52.4709 132.123 57.9388C132.674 57.5531 133.141 57.0608 133.498 56.491C133.855 55.9211 134.095 55.2855 134.201 54.6216C136.946 54.7064 140.309 54.4366 141.485 51.9552C141.842 50.9828 142.033 49.9568 142.049 48.9208C142.48 44.7527 144.518 40.9502 145.867 36.9831C147.217 33.0161 147.804 28.367 145.526 24.8497C144.693 23.658 143.687 22.5967 142.542 21.7006C129.616 10.8395 112.621 9.04834 96.3438 9.06446Z" fill="#2F2E41"/>
<path id="Vector_34" d="M162.142 122.706L172.867 125.553C172.867 125.553 197.827 189.472 192.071 233.215C186.316 276.958 182.862 267.749 182.862 267.749C182.862 267.749 173.653 247.029 152.933 251.633L162.142 122.706Z" fill="#2F2E41"/>
<path id="Vector_35" d="M48.6229 624.292C45.847 628.064 46.4035 633.456 43.9446 637.443C41.8132 640.898 37.7962 642.71 35.1302 645.771C34.2795 646.788 33.5212 647.879 32.8641 649.031C30.391 653.174 28.3808 658.483 30.8165 662.648C32.7758 665.998 36.8943 667.307 40.6715 668.2C45.4455 669.328 50.4058 670.23 55.235 669.368C60.0642 668.506 64.7838 665.549 66.5057 660.956C66.8441 659.801 67.2464 658.666 67.7108 657.555C70.3282 652.402 78.5383 652.347 81.217 647.225C83.0917 643.641 81.3684 639.309 79.6459 635.649L74.3848 624.472C72.6389 620.763 65.5611 622.896 61.8714 622.007C57.0591 620.848 52.0848 619.571 48.6229 624.292Z" fill="#2F2E41"/>
<path id="Vector_36" d="M10.1917 265.447L58.5394 340.271C58.5394 340.271 88.4689 378.258 97.678 360.991C106.887 343.724 65.4462 314.946 65.4462 314.946L34.3655 257.389L10.1917 265.447Z" fill="#FFB8B8"/>
<path id="Vector_37" d="M34.3655 125.008L25.1564 122.706C25.1564 122.706 6.73827 128.462 2.13372 152.635C-2.47081 176.809 0.982583 273.505 6.73826 274.656C12.4939 275.807 35.1655 257.819 38.7945 261.633C42.4235 265.447 30.9121 245.877 34.3655 235.517C37.8189 225.157 34.3655 125.008 34.3655 125.008Z" fill="#2F2E41"/>
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="366" y="130" width="250" height="140">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)">
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group 15">
<path id="Rectangle 59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" width="200.839" height="360.444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="711.188" height="669.683" fill="white"/>
</clipPath>
</defs>
</svg>
</body>
</html>
Codepen: https://codepen.io/DevKris/pen/KKpVxVa
Desired outcome: https://imgur.com/a/lG7vgem

You need to reuse the #Group15 several times:
Also I would use ids with no sapces: i.e. id="Group15" instead of id="Group 15"
I hope this is what you are asking.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align:center;
margin: 20px;
}
#code-main {
animation: code 3s infinite;
}
#keyframes code {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 150px);
}
}
<svg width="712" height="670" viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)" >
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group15">
<path id="Rectangle59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
<use xlink:href="#Group15" y="-45" />
<use xlink:href="#Group15" y="-90" />
<use xlink:href="#Group15" y="-135" />
<use xlink:href="#Group15" y="-180" />
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" width="200.839" height="360.444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="711.188" height="669.683" fill="white"/>
</clipPath>
</defs>
</svg>

How to create svg gradient with 3 points set out in a triangle that blend together

<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>
I want to create a svg gradient in a circle that has 3 points of color, set out in a triangle like this.
<svg id="color-gradient" width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="blue" />
<stop offset="100%" stop-color="yellow"/>
</linearGradient>
</defs>
<circle cx="200" cy="200" r="100" fill="url(#gradient)"/>
</svg>
I have tried creating a linear Gradient with three stops, but I am not sure how to position the stops where I need them (top left right).

This is about as close as you can get.
svg {
width: 400px;
}
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="9"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white"/>
</mask>
</defs>
<g mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
</svg>
Since the blending you get in CSS/SVG works purely by combining the red, green, and blue channels of RGB colours separately, it doesn't know that we expect to see green when we blend blue and yellow. Instead you just get a murky grey.
So in the example above, I "cheated" by adding slivers of the "correct" colours in between our three main colours. For example I put a sliver of green between the blue and yellow sectors.
If I don't do that, the above example would look like this:
svg {
width: 400px;
}
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white"/>
</mask>
</defs>
<g mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
</g>
</svg>

This topic is inspired by the answer #Paul LeBeau
The author of the question did not ask a question on animation. But I think that the options will be useful to someone.
Gradient rotation
An animation command is added for a group of elements:
circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
<style>
svg {
width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white">
</circle>
</mask>
</defs>
<g id="gr1" mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
<circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
</svg>
Animation tracks
The command of animation of the radius of circles is added.
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
</circle>
<style>
svg {
width: 400px;
}
</style>
<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
<mask id="circle">
<circle cx="50" cy="50" r="50" fill="white">
</circle>
</mask>
</defs>
<g id="gr1" mask="url(#circle)" filter="url(#blur)">
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 50,50, 0,30" fill="#f0f"/>
<polygon points="100,10, 100,30, 50,50" fill="#f80"/>
</g>
<circle cx="50" cy="50" r="5" fill="white" stroke="silver">
<animateTransform attributeName="transform" type="rotate" xlink:href="#gr1" dur="2s" values="0 50 50;360 50 50" repeatcount="indefinite"/>
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an1" attributeName="r" values="5;50" dur="2s" begin="0s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an2" attributeName="r" values="5;50" dur="2s" begin="0.5s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="1.5s" repeatcount="indefinite" />
</circle>
<circle cx="50" cy="50" r="5" fill="none" stroke-width="0.25" stroke="gray" >
<animate id="an3" attributeName="r" values="5;50" dur="2s" begin="2s" repeatcount="indefinite" />
</circle>
</svg>

i wanted to give it a try, too.
the result is very different depending on the browser, firefox for example doesn't produce a very good result. (although that is also true for the other solutions, I think)
but it doesn't need the manually inserted composite colors and produces a very homogeneous effect on Safari and Chrome…
<svg viewBox="0 0 100 100">
<defs>
<filter id="colorblend">
<feColorMatrix in="SourceGraphic" result="red" type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
1 0 0 0 0" />
<feColorMatrix in="SourceGraphic" result="green" type="matrix" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 1 0 0 0" />
<feColorMatrix in="SourceGraphic" result="blue" type="matrix" values="
0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 1 0 0" />
<feGaussianBlur in="red" stdDeviation="20" result="red" />
<feGaussianBlur in="green" stdDeviation="20" result="green" />
<feGaussianBlur in="blue" stdDeviation="20" result="blue" />
<feBlend mode="screen" in="red" in2="green" result="redplusgreen" />
<feBlend mode="screen" in="redplusgreen" in2="blue" result="rainbow" />
<!--fix alpha -->
<feColorMatrix in="rainbow" result="rainbow" type="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 0" />
<!-- increase brightness -->
<feBlend in="rainbow" in2="rainbow" mode="screen" result="rainbow" />
<!-- remove artefacts -->
<feGaussianBlur in="rainbow" stdDeviation="1" />
</filter>
<mask id="mask">
<circle cx="50" cy="50" r="50" fill="white"></circle>
</mask>
</defs>
<g mask="url(#mask)" filter="url(#colorblend)">
<rect x="-10" width="110" height="110" fill="red" />
<rect x="50" width="60" height="110" fill="lime" />
<polygon points="0,0, 100,0, 100,30, 50,50, 0,30" fill="blue" />
</g>
</svg>

SVG image height auto doesn't work except in Chrome

I'm using image tag in SVG to include website screen captures in mockups for my personal website. I've no problem when I'm visiting my website using Chrome, but using Firefox or Safari, I'm getting some issues.
It works like this: I define a SVG mask, the image use that mask to be in the "screen", and the image height is auto to be great displayed. Here is a snippet:
<svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39">
<defs>
<filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2">
<feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset>
<feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.04"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop>
</linearGradient>
<filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0"></stop>
<stop offset="1" stop-color="#fff"></stop>
</linearGradient>
<linearGradient
id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd"
data-name="Dégradé sans nom 3"
x1="743.59"
y1="994.07"
x2="744.59"
y2="994.07"
gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop>
<stop offset="1" stop-opacity="0.05"></stop>
</linearGradient>
<filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient
id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef"
data-name="Dégradé sans nom 8"
x1="734.18"
y1="984.18"
x2="735.18"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient
id="48a5c464-8edd-45c4-9ce5-a29ab784ca76"
data-name="Dégradé sans nom 9"
x1="735.17"
y1="984.18"
x2="734.17"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse">
<g transform="translate(0 -91)">
<g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16">
<rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect>
</g>
</g>
</mask>
</defs>
<g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard">
<g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook">
<g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg">
<g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)">
<path
id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"></path>
</g>
<path
id="400dfe13-b733-4999-ba8f-7c75bc5675e2"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"
fill="#fff"></path>
</g>
<path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path>
<g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom">
<g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1">
<polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon>
<polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon>
<g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)">
<polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon>
</g>
</g>
<polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon>
<polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon>
<g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom">
<path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path>
<path
id="6ac336ae-89f9-44e0-8892-088e108b9b0c"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="41d1f204-371f-4006-b6e3-3ca8e55170a4"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path>
<path
id="3661128a-dd7f-4831-ad61-767d60316664"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path>
</g>
<g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29">
<path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path>
<g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)">
<path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path>
</g>
</g>
<path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path>
<path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path>
</g>
<g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~">
<g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle">
<rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect>
</g>
<g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)">
<g>
<image width="1618" height="1010" transform="translate(264 79)" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg" style="isolation: isolate; height: auto;"></image>
</g>
</g>
</g>
</g>
</g>
</svg>
On chrome:
On firefox/safari:

height: auto is an invalid value in SVG
SVG is not html. auto isn't a valid value according to the SVG specification.
When a length is used in an SVG presentation attribute, the syntax
must match the following pattern:
length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" |
"pc" | "%")?
But...You can do what you want.
The good news is that you can still do what you want. To achieve this we can use the preserveAspectRatio-attribute. Here is the documentation on preserveAspectRatio.
The documentation describes the preserveAspectRatio on images:
For ‘image’ elements, ‘preserveAspectRatio’ indicates how referenced
images should be fitted with respect to the reference rectangle and
whether the aspect ratio of the referenced image should be preserved
with respect to the current user coordinate system.
According to the documentation the syntax looks like this:
preserveAspectRatio="[defer] align []
Usually you can ignore defer.
The align part indicates where the image is placed. We want to place it on the top-middle of the viewBox. Therefore this value will become xMidYMin indicating the image will be placed in the middle top.
Setting meetOrSlice to slice will set the minimal width and minimal height of the image to that of the viewBox. Setting meetOrSlice to meet will set the maximal width and maximal height of the image to that of the viewBox. We want to see the top of your image in full width. Therefore we set meetOrSlice to slice.
With this information we can set up the preserveAspectRatio-attribute of the image. Note that the viewBox attribute is included since that is required by the spec.
<image
x="264"
y="79"
width="1618"
height="1010"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMin slice"
xlink:href="image.jpg">
</image>
Here is your new code (I only changed the <image>):
<svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39">
<defs>
<filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2">
<feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset>
<feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.04"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop>
</linearGradient>
<filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0"></stop>
<stop offset="1" stop-color="#fff"></stop>
</linearGradient>
<linearGradient
id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd"
data-name="Dégradé sans nom 3"
x1="743.59"
y1="994.07"
x2="744.59"
y2="994.07"
gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop>
<stop offset="1" stop-opacity="0.05"></stop>
</linearGradient>
<filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient
id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef"
data-name="Dégradé sans nom 8"
x1="734.18"
y1="984.18"
x2="735.18"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient
id="48a5c464-8edd-45c4-9ce5-a29ab784ca76"
data-name="Dégradé sans nom 9"
x1="735.17"
y1="984.18"
x2="734.17"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse">
<g transform="translate(0 -91)">
<g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16">
<rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect>
</g>
</g>
</mask>
</defs>
<g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard">
<g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook">
<g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg">
<g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)">
<path
id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"></path>
</g>
<path
id="400dfe13-b733-4999-ba8f-7c75bc5675e2"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"
fill="#fff"></path>
</g>
<path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path>
<g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom">
<g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1">
<polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon>
<polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon>
<g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)">
<polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon>
</g>
</g>
<polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon>
<polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon>
<g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom">
<path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path>
<path
id="6ac336ae-89f9-44e0-8892-088e108b9b0c"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="41d1f204-371f-4006-b6e3-3ca8e55170a4"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path>
<path
id="3661128a-dd7f-4831-ad61-767d60316664"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path>
</g>
<g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29">
<path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path>
<g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)">
<path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path>
</g>
</g>
<path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path>
<path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path>
</g>
<g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~">
<g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle">
<rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect>
</g>
<g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)">
<g>
<image x="264" y="79" width="1618" height="1010" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin slice" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg"></image>
</g>
</g>
</g>
</g>
</g>
</svg>

Unfortunately, this is not supported in any browser other than Google Chrome, as you found out. You will have to use have to find out the actual size of the image and put that in. Another option is to use JavaScript. Sorry.
So for you, your own code snippet would work.
<svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39">
<defs>
<filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2">
<feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset>
<feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.04"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop>
</linearGradient>
<filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0"></stop>
<stop offset="1" stop-color="#fff"></stop>
</linearGradient>
<linearGradient
id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd"
data-name="Dégradé sans nom 3"
x1="743.59"
y1="994.07"
x2="744.59"
y2="994.07"
gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop>
<stop offset="1" stop-opacity="0.05"></stop>
</linearGradient>
<filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient
id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef"
data-name="Dégradé sans nom 8"
x1="734.18"
y1="984.18"
x2="735.18"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient
id="48a5c464-8edd-45c4-9ce5-a29ab784ca76"
data-name="Dégradé sans nom 9"
x1="735.17"
y1="984.18"
x2="734.17"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse">
<g transform="translate(0 -91)">
<g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16">
<rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect>
</g>
</g>
</mask>
</defs>
<g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard">
<g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook">
<g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg">
<g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)">
<path
id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"></path>
</g>
<path
id="400dfe13-b733-4999-ba8f-7c75bc5675e2"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"
fill="#fff"></path>
</g>
<path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path>
<g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom">
<g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1">
<polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon>
<polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon>
<g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)">
<polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon>
</g>
</g>
<polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon>
<polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon>
<g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom">
<path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path>
<path
id="6ac336ae-89f9-44e0-8892-088e108b9b0c"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="41d1f204-371f-4006-b6e3-3ca8e55170a4"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path>
<path
id="3661128a-dd7f-4831-ad61-767d60316664"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path>
</g>
<g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29">
<path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path>
<g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)">
<path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path>
</g>
</g>
<path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path>
<path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path>
</g>
<g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~">
<g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle">
<rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect>
</g>
<g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)">
<g>
<image width="1618" height="1010" transform="translate(264 79)" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg" style="isolation: isolate; height: auto;"></image>
</g>
</g>
</g>
</g>
</g>
</svg>

foreignObject doesn't show up on mobile devices

I have an SVG element which needs to have some html elements in it. I am using foreignObject tag to do this. This works perfectly on normal browsers, but on mobile devices, its not showing the html inside the foreignObject.
Below is my code:
<div class="container">
<svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
<foreignObject x="0%" y="0%" width="80%" height="100%"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>
Words appear here on normal browsers but not on mobile devices
</h1>
</div>
</body>
</foreignObject>
</g>
<foreignObject x="20%" y="70%" width="80%" height="100%"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="box">
<a class="box-item" href="https://website.com/info" target="_blank">link</a>
</div>
</div>
</body>
</foreignObject>
</g>
</svg>
</div>
Both my foreign objects do NOT show up on Mobile Devices :( . Is there some other alternate to using ForeignObjects? I need it to insert HTML into my SVG.
Thanks everyone.

So, your current example isn't even working for me in desktop browsers.
You'll notice no text in the below example.
<div class="container">
<svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
<foreignObject x="0%" y="0%" width="80%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>
Words appear here on normal browsers but not on mobile devices
</h1>
</div>
</body>
</foreignObject>
</g>
<foreignObject x="20%" y="70%" width="80%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="box">
<a class="box-item" href="https://website.com/info" target="_blank">link</a>
</div>
</div>
</body>
</foreignObject>
</g>
</svg>
</div>
However, when I remove the requiredExtension attribute from the foreignObject, everything loads in the desktop browser. The best part is that it also loads on mobile for me. You'll notice the below example displays the intended text when run.
<div class="container">
<svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
<foreignObject x="0%" y="0%" width="80%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<h1>
Words appear here on normal browsers but not on mobile devices
</h1>
</div>
</body>
</foreignObject>
</g>
<foreignObject x="20%" y="70%" width="80%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div class="box">
<a class="box-item" href="https://website.com/info" target="_blank">link</a>
</div>
</div>
</body>
</foreignObject>
</g>
</svg>
</div>
Here's a screenshot to this example loaded in the iOS simulator with an iPhone 5.