Skip to main content
Question

SVG with textPath doesn't import correctly to Figma

  • February 2, 2022
  • 1 reply
  • 1056 views

Sam36

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.

This topic has been closed for comments

1 reply

  • 0 replies
  • March 4, 2022

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings