SVG in browser different in Affinity Designer

[v4567]

I created an SVG image from code and it looks the way I want it in the browser, however the mask does not appear when I open it in Affinity Designer. Any ideas why?

Here's my SVG code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" viewBox="150 0 4200 5100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">

    <defs>

        <mask id="text-mask">

        <rect width="100%" height="100%" fill="#ffffff" transform="translate(607.50)"></rect>

        <text transform="translate(1642.5, 1250)" text-anchor="middle" font-size="600" font-family="Arial Black" font-style="bold" stroke="#000000" stroke-width="8" fill="none">

            ^api_test^

        </text>

        </mask>

        <path id="textpath_top" d="M996.073,689.796C996.073,689.796 2177.68,71.788 3496.19,689.796" style="fill:none;"/>

 

    </defs>

    <g id="box_bear">

        <rect x="861.667" y="16.111" width="240" height="235.556" style="fill:none;stroke:rgb(71,64,62);stroke-width:12.5px;"/>

        <g transform="matrix(1,0,0,1,277.222,-119.111)">

            <text x="614.289px" y="249.478px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:125px;fill:rgb(71,64,62);">BE</text>

            <text x="610.84px" y="349.478px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:125px;fill:rgb(71,64,62);">AR</text>

        </g>

    </g>

    <g id="outlineBear" style="mask: url('#text-mask')" transform="translate(607.50) scale(0.73)">>

        <path d="M814.73,1332.37L953.594,1176.92L939.086,1106.45L1044.79,948.938L1044.79,890.906L1073.8,843.236L1127.69,882.615L1175.36,872.252L1208.52,824.583L1231.32,795.566L1260.34,801.784L1285.21,824.583L1415.78,739.607L1552.57,685.719L1670.71,615.251L1784.7,542.71L1900.77,515.767L2047.92,521.984L2149.48,561.364L2269.69,619.396L2398.19,625.614L2526.69,609.033L2696.64,577.944L2858.31,567.581L2964.01,592.453L3090.44,629.759L3229.3,700.227L3339.15,793.494L3415.83,897.124L3492.52,984.172L3507.03,1035.99L3494.59,1062.93L3488.37,1096.09L3531.9,1205.94L3544.33,1268.12L3554.7,1336.51L3562.99,1462.94L3583.71,1529.26L3621.02,1610.1L3676.98,1711.65L3685.27,1788.34L3662.47,1836.01L3621.02,1852.59L3587.86,1883.68L3552.62,1894.04L3426.2,1889.89L3401.33,1873.31L3349.51,1858.81L3390.96,1798.7L3448.99,1796.63L3490.45,1763.47L3461.43,1719.94L3378.53,1722.02L3289.41,1684.71L3223.08,1647.4L3169.19,1562.42L2984.73,1699.22L2908.05,1732.38L2891.47,1775.9L2862.45,1809.06L2837.58,1850.52L2816.85,1881.6L2622.03,1900.26L2547.42,1891.97L2501.82,1871.24L2466.59,1856.73L2441.72,1844.3L2474.88,1809.06L2522.55,1798.7L2601.3,1782.12L2644.83,1769.68L2644.83,1680.56L2636.54,1579.01L2646.9,1527.19L2651.05,1456.72L2572.29,1460.87L2510.11,1454.65L2377.46,1448.43L2418.92,1566.57L2445.86,1614.24L2460.37,1672.27L2437.57,1709.58L2418.92,1755.18L2396.12,1790.41L2375.39,1838.08L2348.45,1850.52L2246.89,1852.59L2184.71,1858.81L2114.24,1862.95L2072.79,1848.44L2099.74,1813.21L2149.48,1761.39L2188.86,1740.67L2232.38,1740.67L2232.38,1715.8L2118.39,1612.17L2054.14,1556.21L2018.91,1494.03L1846.88,1688.85L1755.69,1751.03L1664.49,1836.01L1577.44,1885.75L1506.98,1927.2L1451.02,1950L1405.42,1933.42L1368.11,1933.42L1328.73,1945.86L1268.63,1916.84L1185.72,1879.53L1220.96,1852.59L1283.14,1819.43L1384.69,1804.92L1442.73,1709.58L1538.07,1612.17L1594.03,1473.3L1637.55,1317.86L1571.23,1309.57L1511.12,1324.08L1424.07,1353.09L1359.82,1396.62L1293.5,1442.21L1272.77,1494.03L1229.25,1452.58L1175.36,1446.36L1115.26,1460.87L1069.66,1500.25L1015.77,1491.96L976.393,1454.65L986.755,1423.56L947.376,1394.55L881.053,1394.55L831.311,1355.17L814.73,1332.37Z" style="fill:rgb(54,48,46);stroke:rgb(54,48,46);stroke-width:50px;"/>

        <path d="M996.073,689.796C996.073,689.796 2177.68,71.788 3496.19,689.796" style="fill:none;"/>

    </g>

    <text dy="0" textLength="2500" style="font-size: 60px; font-family: Franklin Gothic, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 12px;" transform="translate(607.50) scale(0.73)">

        <textPath xlink:href="#textpath_top">

            Northern California Athletics

        </textPath>

    </text>

</svg>

[BofG]

Affinity only supports a subset of SVG.

[v_kyr]

• ADe Layer masking

The best way IMO in order to support ADe's way here is, to first create in ADe either a pixel or vector mask (so what you need here) and export that then as an SVG file.

• Then reopen the by ADe exported SVG with Ade to see if it interprets it's own generate code correctly again (aka eat your own dog food).
• Next open the by ADe generated SVG file inside an editor and inspect how ADe generates and writes out the SVG code here.
• Afterwards code your SVG code generation the way ADe should usually be able to parse/read and interpret it correctly again in!