Text with textPath does not display

[billreynolds007]

Using the latest (5 July 2024) of svgdom, d3, and sharp, the following SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="200" height="200" fill="pink"></rect>
<path stroke-width="2" fill-opacity="0" stroke="red" id="path1" d="M 10 100 q 110 -50 150 0"></path>
<text><textPath href="#path1" startOffset="50%">World</textPath></text></svg>

displays in an online SVG viewer as

The "World" text does not show up in the captured output though. Should I expect it to show up?

const main = async () => {
const { createSVGWindow } = await import('svgdom')
const { SVG, registerWindow } = await import('@svgdotjs/svg.js')
var d3 = await import("d3");
const sharp = require("sharp")

const window = createSVGWindow()
const document = window.document
registerWindow(window, document)
const canvas = SVG(document.documentElement)

var svg = document.documentElement;
var dd = d3.select(svg)
dd.append('rect')
 .attr('width', '200')
 .attr('height', '200')
 .attr('fill', 'pink');

dd.append('path')
 .attr("stroke-width", 2)
 .attr('fill-opacity', 0) // transparent
 .attr("stroke", "red")
 .attr('id', 'path1')
 .attr('d', 'M 10 100 q 110 -50 150 0');

var text = dd.append('text')
if (false)
 {
 text.attr('x', '20')
   .attr('y', '30')
   .text('Hello');
 }
else
{
 text.append('textPath')
  .attr('xlink:href', '#path1')
  .attr('startOffset', '50%')
  .text('World')
}

var source = canvas.svg();
console.log(source)

sharp( Buffer.from(source) )
  .png()
  .toFile("new-file.png")
  .catch(function(err) {
    console.log(err)
  });

}
main()

[billreynolds007]

This looks like a problem with the 'sharp' module.

[billreynolds007]

https://github.com/lovell/sharp/issues/855

[Fuzzyma]

@billreynolds007 thats a weird mix of svg.js and d3 you got there 😄. Nice to see that it works for you (especially svgdom!)