CODEWITHSUNDEEP
javascriptd3.jssvgreactjsdata-visualization
c1c1c1
c1c1c1

Reputation: 405

write SVG text from keyboard

I'm new to SVG and was wondering: Is it possible to write dynamically (like you would on Notepad for instance) into an SVG element?

The final goal is to have an SVG text corpus I can manipulate afterwards.

I've seen some tutorials but they just pass the text into a 'text' element. I'm aiming to have letters as vectors elements.

Any ideas or inputs?

Thank you!

Upvotes: 0

Views: 135

Answers (1)

Max Starkenburg
Max Starkenburg

Reputation: 1539

Try surrounding the SVG with a contentEditable div, e.g.

<div contenteditable="true">
  <svg ... >
    ....
  </svg>
</div>

Here's an example I made using an SVG generated from Illustrator: https://jsfiddle.net/bLfe2wxc/1/

In Firefox, the cursor appears not to "take" (but just click on the text and type anyway) and on Chrome the cursor is visually off, but perhaps that won't be an issue in your particular use as it is in this particular fiddle.

Upvotes: 1

Related Questions