css - 如何将 svg-glyph 转换为路径？

Question

我从 svg-font 中提取了这样的 svg-glyph:

我想将它转换成我可以在 css 文件中使用的 svg 路径。我需要做什么？

<glyph unicode="&#xf072;" horiz-adv-x="4503" d="M1339 1036q-1 -1 -22.5 -20t-35.5 -30.5t-47 -38t-60 -46t-70 -49.5t-82 -54t-91.5 -53.5t-103.5 -54.5t-112 -51t-123 -47q5 -15 12.5 -42.5t24 -109t24.5 -159.5t5 -181t-25 -188q-2 2 -6 4.5t-15 8.5t-20 9t-19 1.5t-14 -9.5q-43 -96 -68 -96q-7 1 -12 6 q-10 12 -12.5 132.5t-13 288.5t-39.5 271q-11 -4 -30.5 -9.5t-74 -16t-102 -12.5t-101.5 10t-86 43v1q-1 0 -3 1t-3 2t-3 3.5t-2.5 5.5t-1 7.5t0.5 9.5v1q-1 1 -2 3.5l-2 5t-2 5.5t-1.5 6l-1 6t0 5.5t1.5 4t3 2.5q1 0 70 -1.5t160 6.5t151 32q-15 44 -37 114.5t-60 234.5 t-42 264q-4 160 43 220t147 54q76 -6 163 -15.5t241.5 -31t283.5 -57.5t191 -80q51 -36 76.5 -76.5t26.5 -75t-12 -69t-30.5 -57t-36.5 -38.5zM545 702q15 4 41.5 12.5t103.5 39t149 66.5t163.5 96.5t162.5 127.5q129 123 -48 208q-133 64 -365 86q-116 10 -162 1 q-90 -19 -110 -27q-63 -26 -77 -100q-7 -40 -4 -96q6 -90 39.5 -189.5t63.5 -156t43 -68.5zM4383 717q8 8 30 33q85 96 91 84q1 -2 0 -7q-2 -13 -45.5 -66t-34.5 -69q7 -12 21 -13.5t22 1.5t10 -4q1 -9 -42 -68.5t-101.5 -117.5t-90.5 -56q-31 3 -68.5 29t-61 47.5 t-27.5 17.5q-8 -12 -23 -29.5t-44 -46.5t-64.5 -44.5t-67.5 -6.5q-25 7 -34.5 32.5t-4.5 57t13.5 61.5t16.5 50l9 21q-38 -13 -61 -13q-9 0 -10.5 20t-5.5 44.5t-19 32.5q-7 2 -13 2t-15 -6.5t-16.5 -13t-16.5 -17.5t-16.5 -19.5t-15.5 -20t-13 -19t-10.5 -15.5t-6.5 -10 t-21.5 -30.5t-43.5 -59.5t-50 -64.5t-50.5 -54.5t-35.5 -19q-18 3 -24.5 42.5t-4.5 77.5l3 38l-11 8q-2 -5 -6.5 -12.5t-23 -26t-41.5 -32.5t-63.5 -24.5t-88.5 -8.5q-40 1 -75 17t-57.5 38t-42 47.5t-31 47t-23 34.5t-19.5 12q-23 -5 -54 -131t-40 -200q-1 -7 -9 -64.5 t-16.5 -110.5t-21 -118.5t-28.5 -118t-33 -78.5q-42 -62 -80 -35q-37 27 -39 110v17q2 52 26 169.5t47 208.5l23 91q-45 -15 -73.5 -7t-42.5 32t-20 49.5t-6 45.5l-1 20q-7 -11 -18.5 -27.5t-40 -45t-48.5 -32.5q-39 -4 -79 12t-61 34l-20 18q-10 -15 -24.5 -32t-41 -43.5 t-58.5 -44t-62 -18.5q-24 -1 -37.5 19.5t-15.5 50.5t-0.5 60t5.5 51l3 22q-61 -66 -162 -110.5t-125 -20.5q-15 14 -27 83t-17 132l-5 62q-15 -15 -22.5 -23t-19 -25t-17.5 -28t-29 -51t-43 -74q-61 -102 -110 -145t-95 -56q-16 -4 -26 8.5t-12.5 40t-2.5 44.5t2 43v6 q2 20 1 31t-3 15l-2 3q-4 -4 -21 -28.5t-30.5 -40.5t-38 -31t-49.5 -15q-32 0 -72.5 16t-64.5 32l-25 16q-77 -145 -150 -148q-51 -2 -75 63q-31 82 4 187q7 23 18 45q29 60 64 106t64 68.5t53.5 37t38.5 17.5l14 4q33 -4 50 -51.5t21 -102.5t18 -100t42 -45q39 -1 90 56 t81 107.5t38 70.5l4 8q4 8 5.5 11.5t6.5 12t8.5 13t9 12t11 11.5t12 8t13.5 5.5t14 0.5t12 -3.5t9 -6t6.5 -8t4 -9t2.5 -9.5t1.5 -9.5t0.5 -8.5t-0.5 -7t-0.5 -5v-2l-54 -248q141 202 215.5 276t116.5 66q19 -3 31.5 -17t16 -30t5.5 -31.5t0 -21.5l13 -221q9 1 24 9.5 t37.5 27t38.5 32t48.5 42.5t45.5 40q7 6 35.5 31t41.5 36.5t39.5 33.5t43 33t37 24t35.5 18t26 3q16 -2 26.5 -14t16 -31t8 -34.5t3.5 -36t2 -24.5q2 -14 17.5 -54.5t30.5 -74.5l15 -34q4 -5 27 27q20 26 127 190q50 77 112.5 107t90.5 15q14 -7 27.5 -45t20.5 -72l7 -34 q35 0 71.5 26.5t64 60t63 65.5t69.5 42t84 -10q57 -28 110.5 -72t77.5 -74l25 -30q27 38 78.5 88t71.5 45q25 -6 44 -37.5t5 -50.5q-9 -12 -17.5 -34t-12.5 -38l-5 -16q63 78 123 120.5t92 33.5q19 -5 33.5 -28.5t18.5 -44.5l5 -21q27 29 58.5 53.5t57 40t56 29t47 19 t38 12.5t22.5 7q13 4 23 -23q21 -54 19 -135l-1 -18q-12 -92 26 -125q18 -16 130 97zM952 387q24 0 52.5 66t45.5 132l17 66q-73 -65 -115 -163q-34 -80 -11 -98q4 -3 11 -3zM2191 453q26 -4 59 62t52 134l20 68q-37 -26 -94 -119q-67 -111 -49 -138q5 -6 12 -7zM2707 471 q26 6 43 39.5t22.5 76t7.5 84.5t0 71l-1 28q-32 -54 -70 -151q-61 -157 -5 -149q2 1 3 1zM2693 -152q3 4 7 12t17.5 35.5t24 55.5t24.5 72t20 86.5t10.5 98.5t-3.5 107q-3 -6 -8.5 -18.5t-20.5 -56.5t-27.5 -94t-25 -130.5t-18.5 -167.5zM3209 547q51 5 91 32t20 62 q-22 37 -66.5 67t-70.5 25q-52 -9 -39 -108q0 -3 1 -9t5.5 -20.5t11 -25t19 -18t28.5 -5.5zM3942 524q22 -10 48.5 12.5t49 62t42 80t30.5 69.5l11 30q-32 -12 -85.5 -70.5t-85.5 -116.5t-10 -67z" />

我试过这样输出:

    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path fill='#fff' d='M1339 1036q-1 -1 -22.5 -20t-35.5 -30.5t-47 -38t-60 -46t-70 -49.5t-82 -54t-91.5 -53.5t-103.5 -54.5t-112 -51t-123 -47q5 -15 12.5 -42.5t24 -109t24.5 -159.5t5 -181t-25 -188q-2 2 -6 4.5t-15 8.5t-20 9t-19 1.5t-14 -9.5q-43 -96 -68 -96q-7 1 -12 6 q-10 12 -12.5 132.5t-13 288.5t-39.5 271q-11 -4 -30.5 -9.5t-74 -16t-102 -12.5t-101.5 10t-86 43v1q-1 0 -3 1t-3 2t-3 3.5t-2.5 5.5t-1 7.5t0.5 9.5v1q-1 1 -2 3.5l-2 5t-2 5.5t-1.5 6l-1 6t0 5.5t1.5 4t3 2.5q1 0 70 -1.5t160 6.5t151 32q-15 44 -37 114.5t-60 234.5 t-42 264q-4 160 43 220t147 54q76 -6 163 -15.5t241.5 -31t283.5 -57.5t191 -80q51 -36 76.5 -76.5t26.5 -75t-12 -69t-30.5 -57t-36.5 -38.5zM545 702q15 4 41.5 12.5t103.5 39t149 66.5t163.5 96.5t162.5 127.5q129 123 -48 208q-133 64 -365 86q-116 10 -162 1 q-90 -19 -110 -27q-63 -26 -77 -100q-7 -40 -4 -96q6 -90 39.5 -189.5t63.5 -156t43 -68.5zM4383 717q8 8 30 33q85 96 91 84q1 -2 0 -7q-2 -13 -45.5 -66t-34.5 -69q7 -12 21 -13.5t22 1.5t10 -4q1 -9 -42 -68.5t-101.5 -117.5t-90.5 -56q-31 3 -68.5 29t-61 47.5 t-27.5 17.5q-8 -12 -23 -29.5t-44 -46.5t-64.5 -44.5t-67.5 -6.5q-25 7 -34.5 32.5t-4.5 57t13.5 61.5t16.5 50l9 21q-38 -13 -61 -13q-9 0 -10.5 20t-5.5 44.5t-19 32.5q-7 2 -13 2t-15 -6.5t-16.5 -13t-16.5 -17.5t-16.5 -19.5t-15.5 -20t-13 -19t-10.5 -15.5t-6.5 -10 t-21.5 -30.5t-43.5 -59.5t-50 -64.5t-50.5 -54.5t-35.5 -19q-18 3 -24.5 42.5t-4.5 77.5l3 38l-11 8q-2 -5 -6.5 -12.5t-23 -26t-41.5 -32.5t-63.5 -24.5t-88.5 -8.5q-40 1 -75 17t-57.5 38t-42 47.5t-31 47t-23 34.5t-19.5 12q-23 -5 -54 -131t-40 -200q-1 -7 -9 -64.5 t-16.5 -110.5t-21 -118.5t-28.5 -118t-33 -78.5q-42 -62 -80 -35q-37 27 -39 110v17q2 52 26 169.5t47 208.5l23 91q-45 -15 -73.5 -7t-42.5 32t-20 49.5t-6 45.5l-1 20q-7 -11 -18.5 -27.5t-40 -45t-48.5 -32.5q-39 -4 -79 12t-61 34l-20 18q-10 -15 -24.5 -32t-41 -43.5 t-58.5 -44t-62 -18.5q-24 -1 -37.5 19.5t-15.5 50.5t-0.5 60t5.5 51l3 22q-61 -66 -162 -110.5t-125 -20.5q-15 14 -27 83t-17 132l-5 62q-15 -15 -22.5 -23t-19 -25t-17.5 -28t-29 -51t-43 -74q-61 -102 -110 -145t-95 -56q-16 -4 -26 8.5t-12.5 40t-2.5 44.5t2 43v6 q2 20 1 31t-3 15l-2 3q-4 -4 -21 -28.5t-30.5 -40.5t-38 -31t-49.5 -15q-32 0 -72.5 16t-64.5 32l-25 16q-77 -145 -150 -148q-51 -2 -75 63q-31 82 4 187q7 23 18 45q29 60 64 106t64 68.5t53.5 37t38.5 17.5l14 4q33 -4 50 -51.5t21 -102.5t18 -100t42 -45q39 -1 90 56 t81 107.5t38 70.5l4 8q4 8 5.5 11.5t6.5 12t8.5 13t9 12t11 11.5t12 8t13.5 5.5t14 0.5t12 -3.5t9 -6t6.5 -8t4 -9t2.5 -9.5t1.5 -9.5t0.5 -8.5t-0.5 -7t-0.5 -5v-2l-54 -248q141 202 215.5 276t116.5 66q19 -3 31.5 -17t16 -30t5.5 -31.5t0 -21.5l13 -221q9 1 24 9.5 t37.5 27t38.5 32t48.5 42.5t45.5 40q7 6 35.5 31t41.5 36.5t39.5 33.5t43 33t37 24t35.5 18t26 3q16 -2 26.5 -14t16 -31t8 -34.5t3.5 -36t2 -24.5q2 -14 17.5 -54.5t30.5 -74.5l15 -34q4 -5 27 27q20 26 127 190q50 77 112.5 107t90.5 15q14 -7 27.5 -45t20.5 -72l7 -34 q35 0 71.5 26.5t64 60t63 65.5t69.5 42t84 -10q57 -28 110.5 -72t77.5 -74l25 -30q27 38 78.5 88t71.5 45q25 -6 44 -37.5t5 -50.5q-9 -12 -17.5 -34t-12.5 -38l-5 -16q63 78 123 120.5t92 33.5q19 -5 33.5 -28.5t18.5 -44.5l5 -21q27 29 58.5 53.5t57 40t56 29t47 19 t38 12.5t22.5 7q13 4 23 -23q21 -54 19 -135l-1 -18q-12 -92 26 -125q18 -16 130 97zM952 387q24 0 52.5 66t45.5 132l17 66q-73 -65 -115 -163q-34 -80 -11 -98q4 -3 11 -3zM2191 453q26 -4 59 62t52 134l20 68q-37 -26 -94 -119q-67 -111 -49 -138q5 -6 12 -7zM2707 471 q26 6 43 39.5t22.5 76t7.5 84.5t0 71l-1 28q-32 -54 -70 -151q-61 -157 -5 -149q2 1 3 1zM2693 -152q3 4 7 12t17.5 35.5t24 55.5t24.5 72t20 86.5t10.5 98.5t-3.5 107q-3 -6 -8.5 -18.5t-20.5 -56.5t-27.5 -94t-25 -130.5t-18.5 -167.5zM3209 547q51 5 91 32t20 62 q-22 37 -66.5 67t-70.5 25q-52 -9 -39 -108q0 -3 1 -9t5.5 -20.5t11 -25t19 -18t28.5 -5.5zM3942 524q22 -10 48.5 12.5t49 62t42 80t30.5 69.5l11 30q-32 -12 -85.5 -70.5t-85.5 -116.5t-10 -67z' /></svg>");

但没有任何显示，我不确定如何测试它。

作为引用，这个有效:

   content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='30'><polygon fill='#00bbff' points='0,0 6,15 0,30 '/></svg>");

Answer 1

我添加了一个 viewBox 来定义可见区域，并通过使用黑色作为填充颜色删除了 #。它现在显示在 Firefox 上。

<!DOCTYPE html>
<html>
<head>
<style> 
html, body {
width : 100%;
height : 100%;
}
body {
background-image: url("data:image/svg+xml;utf8,<svg viewBox='-100 -500 4900 4000' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M1339 1036q-1 -1 -22.5 -20t-35.5 -30.5t-47 -38t-60 -46t-70 -49.5t-82 -54t-91.5 -53.5t-103.5 -54.5t-112 -51t-123 -47q5 -15 12.5 -42.5t24 -109t24.5 -159.5t5 -181t-25 -188q-2 2 -6 4.5t-15 8.5t-20 9t-19 1.5t-14 -9.5q-43 -96 -68 -96q-7 1 -12 6 q-10 12 -12.5 132.5t-13 288.5t-39.5 271q-11 -4 -30.5 -9.5t-74 -16t-102 -12.5t-101.5 10t-86 43v1q-1 0 -3 1t-3 2t-3 3.5t-2.5 5.5t-1 7.5t0.5 9.5v1q-1 1 -2 3.5l-2 5t-2 5.5t-1.5 6l-1 6t0 5.5t1.5 4t3 2.5q1 0 70 -1.5t160 6.5t151 32q-15 44 -37 114.5t-60 234.5 t-42 264q-4 160 43 220t147 54q76 -6 163 -15.5t241.5 -31t283.5 -57.5t191 -80q51 -36 76.5 -76.5t26.5 -75t-12 -69t-30.5 -57t-36.5 -38.5zM545 702q15 4 41.5 12.5t103.5 39t149 66.5t163.5 96.5t162.5 127.5q129 123 -48 208q-133 64 -365 86q-116 10 -162 1 q-90 -19 -110 -27q-63 -26 -77 -100q-7 -40 -4 -96q6 -90 39.5 -189.5t63.5 -156t43 -68.5zM4383 717q8 8 30 33q85 96 91 84q1 -2 0 -7q-2 -13 -45.5 -66t-34.5 -69q7 -12 21 -13.5t22 1.5t10 -4q1 -9 -42 -68.5t-101.5 -117.5t-90.5 -56q-31 3 -68.5 29t-61 47.5 t-27.5 17.5q-8 -12 -23 -29.5t-44 -46.5t-64.5 -44.5t-67.5 -6.5q-25 7 -34.5 32.5t-4.5 57t13.5 61.5t16.5 50l9 21q-38 -13 -61 -13q-9 0 -10.5 20t-5.5 44.5t-19 32.5q-7 2 -13 2t-15 -6.5t-16.5 -13t-16.5 -17.5t-16.5 -19.5t-15.5 -20t-13 -19t-10.5 -15.5t-6.5 -10 t-21.5 -30.5t-43.5 -59.5t-50 -64.5t-50.5 -54.5t-35.5 -19q-18 3 -24.5 42.5t-4.5 77.5l3 38l-11 8q-2 -5 -6.5 -12.5t-23 -26t-41.5 -32.5t-63.5 -24.5t-88.5 -8.5q-40 1 -75 17t-57.5 38t-42 47.5t-31 47t-23 34.5t-19.5 12q-23 -5 -54 -131t-40 -200q-1 -7 -9 -64.5 t-16.5 -110.5t-21 -118.5t-28.5 -118t-33 -78.5q-42 -62 -80 -35q-37 27 -39 110v17q2 52 26 169.5t47 208.5l23 91q-45 -15 -73.5 -7t-42.5 32t-20 49.5t-6 45.5l-1 20q-7 -11 -18.5 -27.5t-40 -45t-48.5 -32.5q-39 -4 -79 12t-61 34l-20 18q-10 -15 -24.5 -32t-41 -43.5 t-58.5 -44t-62 -18.5q-24 -1 -37.5 19.5t-15.5 50.5t-0.5 60t5.5 51l3 22q-61 -66 -162 -110.5t-125 -20.5q-15 14 -27 83t-17 132l-5 62q-15 -15 -22.5 -23t-19 -25t-17.5 -28t-29 -51t-43 -74q-61 -102 -110 -145t-95 -56q-16 -4 -26 8.5t-12.5 40t-2.5 44.5t2 43v6 q2 20 1 31t-3 15l-2 3q-4 -4 -21 -28.5t-30.5 -40.5t-38 -31t-49.5 -15q-32 0 -72.5 16t-64.5 32l-25 16q-77 -145 -150 -148q-51 -2 -75 63q-31 82 4 187q7 23 18 45q29 60 64 106t64 68.5t53.5 37t38.5 17.5l14 4q33 -4 50 -51.5t21 -102.5t18 -100t42 -45q39 -1 90 56 t81 107.5t38 70.5l4 8q4 8 5.5 11.5t6.5 12t8.5 13t9 12t11 11.5t12 8t13.5 5.5t14 0.5t12 -3.5t9 -6t6.5 -8t4 -9t2.5 -9.5t1.5 -9.5t0.5 -8.5t-0.5 -7t-0.5 -5v-2l-54 -248q141 202 215.5 276t116.5 66q19 -3 31.5 -17t16 -30t5.5 -31.5t0 -21.5l13 -221q9 1 24 9.5 t37.5 27t38.5 32t48.5 42.5t45.5 40q7 6 35.5 31t41.5 36.5t39.5 33.5t43 33t37 24t35.5 18t26 3q16 -2 26.5 -14t16 -31t8 -34.5t3.5 -36t2 -24.5q2 -14 17.5 -54.5t30.5 -74.5l15 -34q4 -5 27 27q20 26 127 190q50 77 112.5 107t90.5 15q14 -7 27.5 -45t20.5 -72l7 -34 q35 0 71.5 26.5t64 60t63 65.5t69.5 42t84 -10q57 -28 110.5 -72t77.5 -74l25 -30q27 38 78.5 88t71.5 45q25 -6 44 -37.5t5 -50.5q-9 -12 -17.5 -34t-12.5 -38l-5 -16q63 78 123 120.5t92 33.5q19 -5 33.5 -28.5t18.5 -44.5l5 -21q27 29 58.5 53.5t57 40t56 29t47 19 t38 12.5t22.5 7q13 4 23 -23q21 -54 19 -135l-1 -18q-12 -92 26 -125q18 -16 130 97zM952 387q24 0 52.5 66t45.5 132l17 66q-73 -65 -115 -163q-34 -80 -11 -98q4 -3 11 -3zM2191 453q26 -4 59 62t52 134l20 68q-37 -26 -94 -119q-67 -111 -49 -138q5 -6 12 -7zM2707 471 q26 6 43 39.5t22.5 76t7.5 84.5t0 71l-1 28q-32 -54 -70 -151q-61 -157 -5 -149q2 1 3 1zM2693 -152q3 4 7 12t17.5 35.5t24 55.5t24.5 72t20 86.5t10.5 98.5t-3.5 107q-3 -6 -8.5 -18.5t-20.5 -56.5t-27.5 -94t-25 -130.5t-18.5 -167.5zM3209 547q51 5 91 32t20 62 q-22 37 -66.5 67t-70.5 25q-52 -9 -39 -108q0 -3 1 -9t5.5 -20.5t11 -25t19 -18t28.5 -5.5zM3942 524q22 -10 48.5 12.5t49 62t42 80t30.5 69.5l11 30q-32 -12 -85.5 -70.5t-85.5 -116.5t-10 -67z' /></svg>");
background-repeat: no-repeat;

}
</style>
</head>
<body>

</body>
</html>