SVG with textPath doesn't import correctly to Figma

I’m making an app that generates text SVGs, one of them is in a spiral and achieved using a <textPath> linked to the spiral path. I can see the spiral appear in Figma, but the text never does.

Result in chrome:

Result in Figma is just the black spiral visible, no text, and no background color.

The svg source:

<svg viewBox="0 0 1920 1080" id="text-base" xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(255, 0, 0);" width="1920" height="1080">
        <style type="text/css">
          @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&amp;display=swap');
        </style>
    
        <style>
          .small { font: italic 13px sans-serif; }
          .heavy { font: bold 30px sans-serif; }
        </style>
    
        <path id="spiral" d="M 960,540 Q 963.1119201038371,540 964.9074772881119,542.8333333333334 Q 966.8249891736743,545.859107388322 965.6666666666666,549.8149545762236 Q 964.3791042587347,554.2121756436304 960,557 Q 955.0801280341466,560.1320877709792 948.6666666666666,559.6299091524472 Q 941.4953555834223,559.0683903583828 935.4626135594409,554.1666666666666 Q 928.781409042637,548.7380542149768 926,540 Q 922.9504215136426,530.419466630714 925.6476589832173,520.1666666666667 Q 928.5780940093621,509.0274308857552 937.3333333333333,500.74018169510543 Q 946.7705937507222,491.8073671983245 960,489 Q 974.1638262609389,485.9943427166357 988.3333333333334,490.9252271188818 Q 1003.4162460846054,496.17396998944935 1013.98225016923,508.83333333333337 Q 1025.173743991964,522.2421097759801 1028,540 Q 1030.9807793286582,558.7287888817698 1023.7972047454537,576.8333333333334 Q 1016.2490162483338,595.8568031382401 999.6666666666666,608.7046820335655 Q 982.2993328668322,622.1607607572737 959.9999999999999,625 Q 936.7120308788317,627.9651163201643 914.6666666666666,618.5196366097891 Q 891.7025102375751,608.6804943969709 876.572886102099,588.1666666666666 Q 860.8484923228734,566.8464076660387 858,540 Q 855.0455625504428,512.1550830389413 866.7579315258754,486.16666666666674 Q 878.883592843312,459.26120153252333 903.3333333333331,441.85045423776376 Q 928.603664922006,423.85536109864705 959.9999999999998,421 Q 992.4008804718918,418.0532798356392 1022.333333333333,432.0354996615398 Q 1053.1807105716098,446.4451042333618 1072.8719776265716,474.833333333333 Q 1093.1393591641843,504.0521270625711 1096,539.9999999999994 Q 1098.9408944729385,576.9563698846632 1082.6869322027958,610.8333333333328 Q 1065.9950021483176,645.6231215059087 1033.6666666666674,667.5944094909069 Q 1000.5003957848651,690.1351830282933 960.0000000000009,693 Q 918.4883825368174,695.936346273336 880.6666666666677,677.4093640671314 Q 841.9340701316341,658.4361866135137 817.6831586447579,622.1666666666677 Q 792.8681986545329,585.0535591105779 790.0000000000001,540.0000000000014 Q 787.0673004004126,493.9332624137587 807.8682040685329,452.166666666668 Q 829.1218764462217,409.49094658723124 869.333333333332,382.9607267804227 Q 910.3928405388989,355.8709907785394 959.9999999999982,353.0000000000001 Q 1010.6217899583671,350.07028796362357 1056.3333333333317,373.14577220419727 Q 1102.9524284539611,396.67939446546336 1131.7617050839126,440.83333333333155 Q 1161.1266660048302,485.8389301767995 1164,539.9999999999977 Q 1166.927220531794,595.1768071087163 1141.5766596601384,644.8333333333311 Q 1115.763494448353,695.3960061581563 1067.666666666669,726.4841369482476 Q 1018.7152072340316,758.1246721643189 960.000000000003,760.9999999999999 Q 900.2681926965561,763.9251115052795 846.6666666666695,736.2990915244742 Q 792.1602510471866,708.2066949358709 758.7934311874172,656.1666666666695 Q 724.8770446079524,603.2695154307315 722.0000000000001,540.0000000000036 Q 719.0766965275521,475.7131990072321 748.97847661119,418.16666666667004 Q 779.3498608874456,359.71637231655086 835.3333333333298,324.0709993230821 Q 892.1760449684543,287.8785380542179 959.9999999999957,285.00000000000017 Q 1028.841794195314,282.07826350999903 1090.3333333333294,314.25604474685423 Q 1152.7276194921924,346.9062226183727 1190.651432541253,406.8333333333293 Q 1229.1201510787075,467.62150228338294 1231.9999999999998,539.9999999999949 Q 1234.9203654978048,613.3967903495695 1200.4663871174816,678.8333333333286 Q 1165.5375726890952,745.1717062632937 1101.6666666666715,785.3738644055879 Q 1036.933122640802,826.1189913515799 960.0000000000059,828.9999999999998 Q 882.0482086380098,831.9191559807377 812.6666666666722,795.1888189818176 Q 742.3841265137117,757.9814968092311 699.903703730077,690.1666666666722 Q 656.8820418718024,621.4878141460836 654.0000000000002,540.0000000000068 Q 651.0819189388922,457.49320178265043 690.0887491538466,384.166666666673 Q 729.5744721277871,309.93989057968975 801.333333333327,265.1812718657421 Q 873.9574397409895,219.88296816452913 959.9999999999922,217.00000000000023 Q 1047.061811342548,214.08288049900824 1124.3333333333262,255.36631728951068 Q 1202.5044044746232,297.13035132384425 1249.5411599985928,372.8333333333261 Q 1297.1161967298863,449.40264832220134 1299.9999999999998,539.9999999999911 Q 1302.916254299326,631.6168308275483 1259.3561145748254,712.8333333333252 " fill="none" stroke="black" stroke-width="3"/>
        <text>
            <textPath id="spiraledText" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#spiral" font-size="52" font-family="JetBrains Mono, Arial, Helvetica, sans-serif" stroke="#FFFFFF" stroke-width="1" fill="#FFFFFF">Nine guys 🌯 Nine guys 🌯 Nine guys 🌯 Nine guys 🌯 Nine guys 🌯 Nine guys 🌯 Nine guys 🌯 Nine guys 🌯 </textPath>
        </text>            
      </svg>

If textPath isn’t supported, I’d love to know that.

Also, how come my background-color isn’t working?

Thanks for any help.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.