paulzi / svg-text-to-path Goto Github PK
View Code? Open in Web Editor NEWConvert svg text element to path
Convert svg text element to path
This is the svg code I got,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" style="display: none;">
My code is just:
let session = new Session(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<style> text{ font-size:42px}</style>
<text x="20" y="25" font-family="Roboto,Noto Sans KR,Noto Sans TC, Helvetica">sà-wàt-dee안녕하세요i Bas안녕하세요ic 可是 343sample</text>
</svg>`,
{
googleApiKey: 'key',
}
);
let stat = await session.replaceAll();
let out = session.getSvgString();
Could you try on your end to see if it is an issue?
Thanks!
Vertical alignment text:
writing-mode: vertical-rl;
text-orientation: upright;
tspan use: y & dx
Hello there, I would like to know if I can use font-family
with multiple values.
For instance, I have a string with KR and English like Adidas with 안녕하세요
.
I set font-family
to Robot, Noto Sans KR
But the KR string failed to demonstrate on the SVG text.
Is there any workaround I can follow? Thanks!
I used OpenType features in css (tabular numbers or alternates stylistic set). But script replaces alternate symbols with the ordinary. Demo: tabular symbols "1" at the top replaced to ordinary.
Can you add support of OT features to maybe you know how works with alternates?
Hi there!
I really appreciate the work you've done with this library. I was wondering if you would be open to a contribution that would migrate this library to TypeScript? Currently, we're unable to generate d.ts files using tsc
due to type errors, even though the JSDOC annotations are great.
For now, we're managing with our own handcrafted d.ts files, but it would be great to have a TypeScript edition of the library. If you're not interested in migrating the library to TypeScript, we could create a fork under @21GramConsulting and maintain a TypeScript edition there.
Please know that our intention is not to hijack your library, but rather to improve its compatibility with TypeScript. Would you be open to a TypeScript migration contribution?
Best,
Adam
These would not be so bad to implement. Depending on the lengthAdjust
mode, either scale all the path widths (with a transform) or space the characters further/closer apart
Hello and thank you very much for your great svg-text-to-path-tool!
We are working on a php-script that should start svg-text-to-path via the exec- or shell_exec-function of php.
We testet code like
$output = shell_exec('cat '.$inputpath.' | svg-text-to-path -k -c svg-create.conf >'.$outputpath);
or
$output = shell_exec('svg-text-to-path -k -c svg-create.conf -o '.$outputpath.' '.$inputpath);
In both cases it seems as if svg-text-to-path doesn't get the inputfile. It creates an output-file, but there is just this line inside:
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">1:0: document must contain a root element.</parsererror>
If we run the same function (of course with the input- and output-path instead of the vars) everything works perfect.
Do you have any idea, what we are doing wrong or how we can use your tool in that way?
Alignment-baseline="middle" SVG property ignored while conversions.
I am using <textPath>
as a simple way to center-align and right-align text (as described here). (I am trying to match an existing design that was generated by some unknown tool many years ago.)
<svg id="convert" xmlns="http://www.w3.org/2000/svg">
<mask id="corners-holes">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="0" cy="0" r="0.25in" fill="black" />
<circle cx="100%" cy="0" r="0.25in" fill="black" />
<circle cx="0" cy="100%" r="0.25in" fill="black" />
<circle cx="100%" cy="100%" r="0.25in" fill="black" />
<circle cx="0.25in" cy="50%" r="0.05in" fill="black" />
<circle cx="5.75in" cy="50%" r="0.05in" fill="black" />
</mask>
<rect x="0" y="0" width="100%" height="100%" fill="#CD7F32" mask="url(#corners-holes)" />
<path id="engName" pathLength="2" d="M25 30h525" stroke="blue" />
<text>
<textPath href="#engName" startoffset="1" text-anchor="middle" dominant-baseline="middle"
fill="black" font-size="26pt">Example Name 1</textPath>
</text>
<path id="hebName" pathLength="2" d="M25 75h525" stroke="blue" />
<text>
<textPath href="#hebName" startoffset="1" text-anchor="middle" dominant-baseline="middle"
fill="black" font-size="29pt">Example Name 2</textPath>
</text>
<path id="dates" pathLength="1" d="M25 120h525" stroke="blue" />
<text>
<textPath href="#dates" startoffset="0" text-anchor="left" dominant-baseline="middle"
fill="black" font-size="21pt">September 16, 1900</textPath>
</text>
<text>
<textPath href="#dates" startoffset="1" text-anchor="end" dominant-baseline="middle"
fill="black" font-size="21pt">June 1, 2020</textPath>
</text>
</svg>
Here is what it is supposed to look like:
(The blue lines are to help with the layout, they will be hidden once I have everything matching the old design.)
I am trying to convert this text to paths like this:
import Session from 'svg-text-to-path';
(async () => {
let session = new Session(document.querySelector('#convert'), {
useFontFace: true,
});
let stat = await session.replaceAll();
console.log(stat);
let svg2 = document.createElement('svg');
svg2.innerHTML = session.getSvgString();
document.body.appendChild(svg2);
})();
When I run this, I get the following error:
TypeError: Cannot read properties of undefined (reading 'baseVal')
at Object.parseSvgLength2 [as parseSvgLength] (browser.js:45:27)
at parseSvgLength (index.js:45:18)
at Session.js:438:30
at Array.forEach (<anonymous>)
at _Session.layoutOpenElementNode_fn (Session.js:436:18)
at _Session.layoutChildNodes_fn (Session.js:415:13)
at _Session.layoutChildNodes_fn (Session.js:418:17)
at _Session.replace (Session.js:273:9)
at async Promise.all (:5173/index 3)
at async applyPromiseMap (misc.js:48:5)
Putting in a breakpoint on parseSvgLength
, I see that the problem is that textPath
elements do not have position properties (x
, y
, dx
, dy
), because they do not inherit SVGTextPositioningElement
.
I don't really know enough about the internal workings of SVG to suggest what the fix for this might be (if it's even possible), but I would think there should be some way to make this work.
Any ideas?
Thanks!
font attributes likefont-family
and font-size
should be removed in path tag because they're not valid for path tag.
Thanks for this lib.
When I import a font like this:
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@1000&display=swap');
</style>
the browser expands it internally to this:
<style>
/* cyrillic-ext */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 1000;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIOOaBXso.woff2)
format("woff2");
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF,
U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 1000;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIMeaBXso.woff2)
format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 1000;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIOuaBXso.woff2)
format("woff2");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 1000;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofIO-aBXso.woff2)
format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 1000;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaB.woff2)
format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
but then this library fails with Failed to read the 'cssRules' property from 'CSSStyleSheet'
However, import rules look like this: https://developer.mozilla.org/en-US/docs/Web/API/CSSImportRule
Hence
svg-text-to-path/providers/font-face/FontFaceSessionProvider.js
Lines 57 to 59 in 1461877
The font-stretch
css property allows different versions of a font to be used for wider or narrower characters.
font-stretch:
ultra-condensed 50%
extra-condensed 62.5%
condensed 75%
semi-condensed 87.5%
normal 100%
semi-expanded 112.5%
expanded 125%
extra-expanded 150%
ultra-expanded 200%
What would the steps be for supporting this in svg-text-to-path?
Attempt to use font "IBM Plex Mono" causes error
RangeError: Offset is outside the bounds of the DataView
at DataView.getInt16 (<anonymous>)
at DecodeStream.<computed> [as readInt16BE] (DecodeStream.js:72:29)
at NumberT.decode (Number.js:20:31)
at Struct._parseFields (Struct.js:41:20)
at Struct.decode (Struct.js:12:10)
at $69aac16029968692$export$2e2bcd8739ae039._getCBox (TTFGlyph.js:79:28)
at $69aac16029968692$export$2e2bcd8739ae039._getMetrics (TTFGlyph.js:318:21)
at get advanceWidth (Glyph.js:146:17)
at descriptor.get (decorators.js:10:23)
at LayoutEngine.js:92:79
Font source:
@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap";
I'm not sure if this is an actual issue or if I just misunderstand the usage of the method.
From my understanding the browser runtimes's replaceAllInString()
method takes a string representation of
a html <svg>
element for it's first argument.
Unfortunately something like
let svgData = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
<text x="343.01" y="267.28" font-family="Arial" font-size="30px" style="stroke: black; fill: rgb(198, 233, 55);">Hello World</text>
</svg>`;
let out = await SvgTextToPath.replaceAllInString(svgData, {
fontsUrl: "/fonts",
handlers: [SvgTextToPath.handlers.map, SvgTextToPath.handlers.http],
group: true
});
just throws:
svg-text-to-path.js:1 Uncaught (in promise) TypeError: Cannot read property 'getComputedStyle' of null
Hi, for the node/CLI variants, is it possible to use system-installed fonts? Especially on Windows?
The obvious --fonts-dir C:\Windows\fonts
didn't work in the CLI.
svg-text-to-path/providers/font-face/FontFaceSessionProvider.js
Lines 73 to 79 in 1461877
The input string is: input : "url(\"https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaB.woff2\") format(\"woff2\")"
Get complication error when import to vue-cli app
ERROR Failed to compile with 1 error 6:11:18 PM
error in ./node_modules/svg-text-to-path/src/main.js
Module parse failed: Unexpected token (70:66)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export async function getFontForNode(textNode, params = {}) {
| let style = getNodeStyle(textNode);let familyList = getStyleProp(textNode, style, 'fontFamily') ?? '';
| let wght = getStyleProp(textNode, style, 'fontWeight');
| let ital = getStyleProp(textNode, style, 'fontStyle');`
When nullish assignment removed, compilation passed.
Letter spacing in svg text element property or inline styles ignored.
Examples
Styles
<text styles="letter-spacing: 1em;">Sample text</text>
Property
<text letter-spacing="1em">Sample text</text>
With following SVG, ERROR: Cannot read properties of undefined (reading 'split')
error occurred.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="34px" y="105.198px" font-family="ArialMT" font-size="98px">fix</text>
</svg>
With the following one, no errors occurred.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="34px" y="105.198px" style="font-family: ArialMT; font-size: 98px">fix</text>
</svg>
Please support font-*** attribute in SVG. here is MDN doc: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#f
My original SVG string is like the below:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="53.9" height="144" viewBox="0 0 215.6 576"><path stroke="#000000" stroke-width="8" d="M4 288L4 0M72 288L72 0M124 288L124 0M144 288L144 0M180 288L180 0M248 288L248 0M268 288L268 0M312 288L312 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="4" d="M14 288L14 0M46 288L46 0M54 288L54 0M90 288L90 0M134 288L134 0M210 288L210 0M222 288L222 0M238 288L238 0M302 288L302 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="12" d="M30 288L30 0M110 288L110 0M158 288L158 0M198 288L198 0M290 288L290 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><text alignment-baseline="hanging" text-decoration="underline" width="68.33042025546865" height="9.68242055019997" font-size="7" transform="matrix(1.0014891976530848e-14,-4,4,1.0014891976530848e-14,87.79999999999998,302.66666666666583)" svgjs:data="{"leading":"1.3"}">ADIDAS | SUPERSTAR 80S</text></svg>
After use this lib, I got:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="53.9" height="144" viewBox="0 0 215.6 576"><path stroke="#000000" stroke-width="8" d="M4 288L4 0M72 288L72 0M124 288L124 0M144 288L144 0M180 288L180 0M248 288L248 0M268 288L268 0M312 288L312 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="4" d="M14 288L14 0M46 288L46 0M54 288L54 0M90 288L90 0M134 288L134 0M210 288L210 0M222 288L222 0M238 288L238 0M302 288L302 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="12" d="M30 288L30 0M110 288L110 0M158 288L158 0M198 288L198 0M290 288L290 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="8" d="M4 288L4 0M72 288L72 0M124 288L124 0M144 288L144 0M180 288L180 0M248 288L248 0M268 288L268 0M312 288L312 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="4" d="M14 288L14 0M46 288L46 0M54 288L54 0M90 288L90 0M134 288L134 0M210 288L210 0M222 288L222 0M238 288L238 0M302 288L302 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><path stroke="#000000" stroke-width="12" d="M30 288L30 0M110 288L110 0M158 288L158 0M198 288L198 0M290 288L290 0" transform="matrix(5.769824349776429e-16,0.7932489451476711,-0.14302191464821212,1.0402930010014438e-16,62.46666666666661,302.66666666666583)"></path><g alignment-baseline="hanging" text-decoration="underline" width="68.33042025546865" height="9.68242055019997" transform="matrix(1.0014891976530848e-14,-4,4,1.0014891976530848e-14,87.79999999999998,302.66666666666583)" svgjs:data="{"leading":"1.3"}"><path d="M3.33 3.9L1.24 3.9L0.77 5.2L0.1 5.2L2 0.22L2.57 0.22L4.47 5.2L3.8 5.2ZM1.44 3.36L3.13 3.36L2.28 1.03ZM5.14 5.2L5.14 0.22L6.55 0.22Q7.2 0.22 7.7 0.51Q8.2 0.79 8.47 1.32Q8.74 1.85 8.74 2.54L8.74 2.86Q8.74 3.56 8.47 4.09Q8.2 4.62 7.7 4.9Q7.19 5.19 6.52 5.2ZM5.8 0.76L5.8 4.66L6.49 4.66Q7.25 4.66 7.67 4.19Q8.09 3.72 8.09 2.84L8.09 2.55Q8.09 1.71 7.7 1.24Q7.3 0.77 6.57 0.76ZM10.44 5.2L9.78 5.2L9.78 0.22L10.44 0.22ZM11.64 5.2L11.64 0.22L13.04 0.22Q13.69 0.22 14.19 0.51Q14.69 0.79 14.96 1.32Q15.23 1.85 15.24 2.54L15.24 2.86Q15.24 3.56 14.97 4.09Q14.69 4.62 14.19 4.9Q13.69 5.19 13.02 5.2ZM12.29 0.76L12.29 4.66L12.98 4.66Q13.74 4.66 14.17 4.19Q14.59 3.72 14.59 2.84L14.59 2.55Q14.59 1.71 14.19 1.24Q13.79 0.77 13.06 0.76ZM18.9 3.9L16.82 3.9L16.35 5.2L15.67 5.2L17.58 0.22L18.15 0.22L20.05 5.2L19.38 5.2ZM17.02 3.36L18.71 3.36L17.86 1.03ZM22.19 2.98Q21.35 2.73 20.96 2.38Q20.58 2.03 20.58 1.51Q20.58 0.92 21.05 0.53Q21.52 0.15 22.27 0.15Q22.78 0.15 23.18 0.35Q23.58 0.55 23.8 0.9Q24.02 1.24 24.02 1.66L23.37 1.66Q23.37 1.21 23.08 0.95Q22.79 0.69 22.27 0.69Q21.78 0.69 21.51 0.9Q21.24 1.12 21.24 1.5Q21.24 1.8 21.5 2.01Q21.76 2.22 22.38 2.4Q23 2.57 23.35 2.78Q23.7 2.99 23.87 3.27Q24.04 3.55 24.04 3.93Q24.04 4.54 23.56 4.9Q23.09 5.26 22.3 5.26Q21.79 5.26 21.35 5.07Q20.9 4.87 20.66 4.53Q20.42 4.19 20.42 3.75L21.08 3.75Q21.08 4.2 21.41 4.47Q21.75 4.73 22.3 4.73Q22.82 4.73 23.1 4.52Q23.38 4.3 23.38 3.94Q23.38 3.57 23.12 3.37Q22.86 3.17 22.19 2.98ZM27.14 6.12L26.63 6.12L26.63 0.22L27.14 0.22ZM31.51 2.98Q30.67 2.73 30.28 2.38Q29.9 2.03 29.9 1.51Q29.9 0.92 30.37 0.53Q30.84 0.15 31.59 0.15Q32.1 0.15 32.51 0.35Q32.91 0.55 33.13 0.9Q33.35 1.24 33.35 1.66L32.69 1.66Q32.69 1.21 32.4 0.95Q32.12 0.69 31.59 0.69Q31.11 0.69 30.84 0.9Q30.56 1.12 30.56 1.5Q30.56 1.8 30.82 2.01Q31.08 2.22 31.7 2.4Q32.32 2.57 32.67 2.78Q33.02 2.99 33.19 3.27Q33.36 3.55 33.36 3.93Q33.36 4.54 32.89 4.9Q32.42 5.26 31.63 5.26Q31.11 5.26 30.67 5.07Q30.23 4.87 29.98 4.53Q29.74 4.19 29.74 3.75L30.4 3.75Q30.4 4.2 30.74 4.47Q31.07 4.73 31.63 4.73Q32.15 4.73 32.42 4.52Q32.7 4.3 32.7 3.94Q32.7 3.57 32.44 3.37Q32.19 3.17 31.51 2.98ZM37.7 0.22L37.7 3.6Q37.7 4.31 37.26 4.75Q36.82 5.2 36.07 5.26L35.9 5.26Q35.08 5.26 34.59 4.82Q34.11 4.38 34.1 3.61L34.1 0.22L34.75 0.22L34.75 3.59Q34.75 4.13 35.05 4.43Q35.35 4.73 35.9 4.73Q36.45 4.73 36.75 4.43Q37.04 4.13 37.04 3.59L37.04 0.22ZM39.4 3.25L39.4 5.2L38.74 5.2L38.74 0.22L40.57 0.22Q41.39 0.22 41.85 0.64Q42.32 1.05 42.32 1.74Q42.32 2.46 41.86 2.86Q41.41 3.25 40.57 3.25ZM39.4 2.71L40.57 2.71Q41.1 2.71 41.38 2.46Q41.66 2.21 41.66 1.75Q41.66 1.3 41.38 1.04Q41.1 0.77 40.61 0.76L39.4 0.76ZM45.97 2.9L43.81 2.9L43.81 4.66L46.32 4.66L46.32 5.2L43.16 5.2L43.16 0.22L46.28 0.22L46.28 0.76L43.81 0.76L43.81 2.36L45.97 2.36ZM48.96 3.18L47.79 3.18L47.79 5.2L47.13 5.2L47.13 0.22L48.78 0.22Q49.62 0.22 50.07 0.6Q50.52 0.98 50.52 1.72Q50.52 2.18 50.27 2.53Q50.02 2.87 49.57 3.04L50.74 5.15L50.74 5.2L50.04 5.2ZM47.79 2.65L48.8 2.65Q49.29 2.65 49.58 2.39Q49.86 2.14 49.86 1.72Q49.86 1.25 49.59 1.01Q49.31 0.76 48.79 0.76L47.79 0.76ZM52.91 2.98Q52.07 2.73 51.68 2.38Q51.3 2.03 51.3 1.51Q51.3 0.92 51.77 0.53Q52.24 0.15 52.99 0.15Q53.5 0.15 53.9 0.35Q54.3 0.55 54.53 0.9Q54.75 1.24 54.75 1.66L54.09 1.66Q54.09 1.21 53.8 0.95Q53.51 0.69 52.99 0.69Q52.5 0.69 52.23 0.9Q51.96 1.12 51.96 1.5Q51.96 1.8 52.22 2.01Q52.48 2.22 53.1 2.4Q53.72 2.57 54.07 2.78Q54.42 2.99 54.59 3.27Q54.76 3.55 54.76 3.93Q54.76 4.54 54.28 4.9Q53.81 5.26 53.02 5.26Q52.51 5.26 52.07 5.07Q51.62 4.87 51.38 4.53Q51.14 4.19 51.14 3.75L51.8 3.75Q51.8 4.2 52.13 4.47Q52.47 4.73 53.02 4.73Q53.54 4.73 53.82 4.52Q54.1 4.3 54.1 3.94Q54.1 3.57 53.84 3.37Q53.58 3.17 52.91 2.98ZM59.04 0.76L57.44 0.76L57.44 5.2L56.78 5.2L56.78 0.76L55.19 0.76L55.19 0.22L59.04 0.22ZM62.25 3.9L60.17 3.9L59.7 5.2L59.02 5.2L60.92 0.22L61.5 0.22L63.4 5.2L62.73 5.2ZM60.36 3.36L62.06 3.36L61.21 1.03ZM65.9 3.18L64.73 3.18L64.73 5.2L64.07 5.2L64.07 0.22L65.71 0.22Q66.55 0.22 67.01 0.6Q67.46 0.98 67.46 1.72Q67.46 2.18 67.21 2.53Q66.96 2.87 66.51 3.04L67.68 5.15L67.68 5.2L66.98 5.2ZM64.73 2.65L65.73 2.65Q66.22 2.65 66.51 2.39Q66.8 2.14 66.8 1.72Q66.8 1.25 66.53 1.01Q66.25 0.76 65.73 0.76L64.73 0.76ZM72.97 1.52Q72.97 1.89 72.77 2.18Q72.57 2.47 72.24 2.64Q72.63 2.8 72.86 3.12Q73.08 3.45 73.08 3.85Q73.08 4.5 72.65 4.88Q72.21 5.26 71.5 5.26Q70.78 5.26 70.35 4.88Q69.92 4.49 69.92 3.85Q69.92 3.45 70.14 3.12Q70.36 2.8 70.75 2.63Q70.42 2.47 70.23 2.18Q70.03 1.89 70.03 1.52Q70.03 0.89 70.44 0.52Q70.84 0.15 71.5 0.15Q72.16 0.15 72.56 0.52Q72.97 0.89 72.97 1.52ZM72.45 3.84Q72.45 3.42 72.19 3.16Q71.92 2.9 71.49 2.9Q71.07 2.9 70.81 3.15Q70.55 3.41 70.55 3.84Q70.55 4.26 70.8 4.5Q71.05 4.75 71.5 4.75Q71.94 4.75 72.2 4.5Q72.45 4.26 72.45 3.84ZM71.5 0.67Q71.13 0.67 70.9 0.9Q70.67 1.13 70.67 1.53Q70.67 1.91 70.89 2.14Q71.12 2.38 71.5 2.38Q71.88 2.38 72.11 2.14Q72.33 1.91 72.33 1.53Q72.33 1.15 72.1 0.91Q71.86 0.67 71.5 0.67ZM77 3.07Q77 4.18 76.62 4.72Q76.24 5.26 75.43 5.26Q74.64 5.26 74.26 4.74Q73.87 4.21 73.86 3.16L73.86 2.31Q73.86 1.22 74.24 0.68Q74.62 0.15 75.43 0.15Q76.23 0.15 76.61 0.66Q76.99 1.18 77 2.25ZM76.37 2.21Q76.37 1.4 76.14 1.04Q75.92 0.67 75.43 0.67Q74.94 0.67 74.72 1.04Q74.5 1.4 74.49 2.16L74.49 3.17Q74.49 3.98 74.73 4.36Q74.96 4.75 75.43 4.75Q75.9 4.75 76.13 4.39Q76.36 4.02 76.37 3.24ZM79.44 2.98Q78.6 2.73 78.21 2.38Q77.83 2.03 77.83 1.51Q77.83 0.92 78.3 0.53Q78.77 0.15 79.52 0.15Q80.03 0.15 80.43 0.35Q80.83 0.55 81.06 0.9Q81.28 1.24 81.28 1.66L80.62 1.66Q80.62 1.21 80.33 0.95Q80.04 0.69 79.52 0.69Q79.03 0.69 78.76 0.9Q78.49 1.12 78.49 1.5Q78.49 1.8 78.75 2.01Q79.01 2.22 79.63 2.4Q80.25 2.57 80.6 2.78Q80.95 2.99 81.12 3.27Q81.29 3.55 81.29 3.93Q81.29 4.54 80.81 4.9Q80.34 5.26 79.55 5.26Q79.04 5.26 78.6 5.07Q78.15 4.87 77.91 4.53Q77.67 4.19 77.67 3.75L78.33 3.75Q78.33 4.2 78.66 4.47Q79 4.73 79.55 4.73Q80.07 4.73 80.35 4.52Q80.63 4.3 80.63 3.94Q80.63 3.57 80.37 3.37Q80.11 3.17 79.44 2.98Z"></path></g></svg>
Which is missing underline. Is it because open type js not support text decoration?
Thank you so much for your attention and participation.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.