search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
10.95k stars 1.07k forks source link

TSPAN dx value in SVG which is not connected to DOM #1281

Closed markocrni closed 10 months ago

markocrni commented 1 year ago

I comment in this section, but this is probably a problem for itself, and again it refers to tspans, and their dx value. I've been working with svg that isn't attached to the DOM, and I've come to the conclusion that this part is causing the problem (tspan): const fontSize = globals.window.getComputedStyle(this.node) Since SVG is not part of DOM, getComputedStyle cannot read font size and value always will be 0. Setting value by .dx(20) also doesn't work.

Originally posted by @markocrni in https://github.com/svgdotjs/svg.js/issues/1088#issuecomment-1239192838

Fuzzyma commented 10 months ago

This is by design. svg.js cannot infer a fontsize if its not in the dom. So you cannot use the newLine feature of svg.js because it doesnt know the line-height. However, you can build up your text strings on your own without any svg.js magic by disabling rebuilding of text:

const text = canvas.text().rebuild(false).text(function(text) {
  text.tspan("Hello").dy(3)
  text.tspan("World).dx(1).dy(-3)
})