infinite-canvas-tutorial icon indicating copy to clipboard operation
infinite-canvas-tutorial copied to clipboard

Export text in SVG format

Open xiaoiver opened this issue 10 months ago • 0 comments

Unlike Figma exporter, for simple inline text, we can use <text> and inlined CSS style.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#example

<style>
    .small {
      font: italic 13px sans-serif;
    }
</style>
<text x="20" y="35" class="small">My</text>

The following properties should be included:

  • text-baseline
  • text-align
  • word-wrap Maybe we should use <tspan> like this: https://github.com/antvis/G/blob/bc84b6834d655d8e8dbe855068bc538d2c2c7f24/packages/g-plugin-svg-renderer/src/shapes/paths/Text.ts#L123

xiaoiver avatar Jan 24 '25 08:01 xiaoiver