search

shrhdk / text-to-svg

Convert text to SVG path without native dependence.
Other
964 stars 131 forks source link

SVG is cut off when using small fontSize #38

Open younanjo opened 5 years ago

younanjo commented 5 years ago

Given the following:

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();
const attributes = {fill: 'black', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 12, anchor: 'top', attributes: attributes};
const svg = textToSVG.getSVG('You there?', options);
console.log(svg);

the resulting SVG: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="12">
    <path fill="black" stroke="black" d="M2.51 6.66L0.36 1.55L1.44 1.55L3.01 5.55L4.56 1.55L5.64 1.55L3.50 6.66L3.50 9.95L2.51 9.95L2.51 6.66ZM9.01 4.02L9.01 4.02L9.01 4.02Q10.11 4.02 10.74 4.99L10.74 4.99L10.74 4.99Q11.28 5.80 11.28 7.10L11.28 7.10L11.28 7.10Q11.28 8.08 10.96 8.82L10.96 8.82L10.96 8.82Q10.36 10.19 8.99 10.19L8.99 10.19L8.99 10.19Q7.93 10.19 7.29 9.29L7.29 9.29L7.29 9.29Q6.72 8.46 6.72 7.10L6.72 7.10L6.72 7.10Q6.72 5.64 7.38 4.80L7.38 4.80L7.38 4.80Q8.02 4.02 9.01 4.02ZM8.99 4.86L8.99 4.86L8.99 4.86Q8.34 4.86 7.98 5.53L7.98 5.53L7.98 5.53Q7.66 6.12 7.66 7.10L7.66 7.10L7.66 7.10Q7.66 8.00 7.92 8.57L7.92 8.57L7.92 8.57Q8.29 9.35 9 9.35L9 9.35L9 9.35Q9.66 9.35 10.02 8.68L10.02 8.68L10.02 8.68Q10.34 8.09 10.34 7.11L10.34 7.11L10.34 7.11Q10.34 6.10 10.01 5.52L10.01 5.52L10.01 5.52Q9.65 4.86 8.99 4.86ZM12.88 8.21L12.88 4.25L13.77 4.25L13.77 8.12L13.77 8.12Q13.77 9.35 14.75 9.35L14.75 9.35L14.75 9.35Q15.38 9.35 15.86 8.88L15.86 8.88L15.86 8.88Q16.29 8.47 16.29 7.79L16.29 7.79L16.29 4.25L17.19 4.25L17.19 9.95L16.52 9.95L16.37 9.28L16.37 9.28Q15.58 10.19 14.55 10.19L14.55 10.19L14.55 10.19Q13.65 10.19 13.20 9.50L13.20 9.50L13.20 9.50Q12.88 9 12.88 8.21L12.88 8.21ZM26.33 4.25L26.33 2.70L27.25 2.70L27.25 4.25L28.66 4.25L28.66 5.11L27.25 5.11L27.25 8.74L27.25 8.74Q27.25 9.15 27.70 9.15L27.70 9.15L27.70 9.15Q28.26 9.15 28.74 9.06L28.74 9.06L28.74 9.96L28.74 9.96Q28.03 10.05 27.52 10.05L27.52 10.05L27.52 10.05Q26.33 10.05 26.33 8.87L26.33 8.87L26.33 5.11L25.20 5.11L25.20 4.25L26.33 4.25ZM30.88 9.95L30.88 1.55L31.77 1.55L31.77 4.89L31.77 4.89Q32.64 4.02 33.50 4.02L33.50 4.02L33.50 4.02Q34.48 4.02 34.93 4.88L34.93 4.88L34.93 4.88Q35.19 5.37 35.19 6.06L35.19 6.06L35.19 9.95L34.29 9.95L34.29 6.32L34.29 6.32Q34.29 4.87 33.36 4.87L33.36 4.87L33.36 4.87Q32.74 4.87 32.26 5.33L32.26 5.33L32.26 5.33Q31.77 5.82 31.77 6.45L31.77 6.45L31.77 9.95L30.88 9.95ZM40.34 8.18L41.28 8.18L41.28 8.18Q40.76 10.18 39.01 10.18L39.01 10.18L39.01 10.18Q37.93 10.18 37.29 9.28L37.29 9.28L37.29 9.28Q36.72 8.46 36.72 7.10L36.72 7.10L36.72 7.10Q36.72 5.81 37.26 4.98L37.26 4.98L37.26 4.98Q37.89 4.02 39 4.02L39 4.02L39 4.02Q41.16 4.02 41.30 7.28L41.30 7.28L37.62 7.28L37.62 7.28Q37.69 9.38 39.02 9.38L39.02 9.38L39.02 9.38Q40.08 9.38 40.34 8.18L40.34 8.18ZM37.66 6.52L40.34 6.52L40.34 6.52Q40.15 4.82 39 4.82L39 4.82L39 4.82Q37.89 4.82 37.66 6.52L37.66 6.52ZM43.75 4.25L44.67 4.25L44.67 5.45L44.67 5.45Q45.70 4.35 46.89 4.02L46.89 4.02L46.89 5.06L46.89 5.06Q45.53 5.39 44.67 6.54L44.67 6.54L44.67 9.95L43.75 9.95L43.75 4.25ZM52.34 8.18L53.28 8.18L53.28 8.18Q52.76 10.18 51.01 10.18L51.01 10.18L51.01 10.18Q49.93 10.18 49.29 9.28L49.29 9.28L49.29 9.28Q48.72 8.46 48.72 7.10L48.72 7.10L48.72 7.10Q48.72 5.81 49.26 4.98L49.26 4.98L49.26 4.98Q49.89 4.02 51 4.02L51 4.02L51 4.02Q53.16 4.02 53.30 7.28L53.30 7.28L49.62 7.28L49.62 7.28Q49.69 9.38 51.02 9.38L51.02 9.38L51.02 9.38Q52.08 9.38 52.34 8.18L52.34 8.18ZM49.66 6.52L52.34 6.52L52.34 6.52Q52.15 4.82 51 4.82L51 4.82L51 4.82Q49.89 4.82 49.66 6.52L49.66 6.52ZM55.54 4.04L54.57 4.04L54.57 3.87L54.57 3.87Q54.57 2.60 55.22 1.79L55.22 1.79L55.22 1.79Q55.88 0.95 57.09 0.95L57.09 0.95L57.09 0.95Q58.12 0.95 58.77 1.55L58.77 1.55L58.77 1.55Q59.43 2.17 59.43 3.13L59.43 3.13L59.43 3.13Q59.43 4.26 58.25 5.44L58.25 5.44L58.25 5.44Q57.75 5.94 57.59 6.38L57.59 6.38L57.59 6.38Q57.40 6.86 57.40 7.96L57.40 7.96L57.40 7.96Q57.40 8.16 57.40 8.26L57.40 8.26L56.40 8.26L56.40 8.26Q56.41 6.80 56.66 6.18L56.66 6.18L56.66 6.18Q56.87 5.64 57.49 4.98L57.49 4.98L57.49 4.98Q58.41 3.98 58.41 3.16L58.41 3.16L58.41 3.16Q58.41 2.70 58.17 2.34L58.17 2.34L58.17 2.34Q57.81 1.83 57.08 1.83L57.08 1.83L57.08 1.83Q55.54 1.83 55.54 3.95L55.54 3.95L55.54 3.95Q55.54 4.01 55.54 4.04L55.54 4.04ZM56.24 10.74L56.24 9.35L57.59 9.35L57.59 10.74L56.24 10.74Z"/>
</svg>

has the left corner cut off? Is this a known issue or am i missing an attribute that can help with this issue?