javascript - 如何将 SVG 图像放置在 TextPath 上文本的开头

Question

这是我想要实现的目标的图像。

我有一些沿着路径弯曲的文本。我想在文本的开头和/或结尾放置一个 SVG 图像。在此示例中，它是一条丝带。但是如何将功能区放置在文本的开头/结尾，并使其旋转与路径上的文本匹配？文本是动态的，因此需要插入功能区的点可以更改为路径上的任何点。

Answer 1

要将评论包含在答案中，您可以这样做:

let text = myTextNode // 
let {x, y} = text.getStartPositionOfChar(0)
let rot = text.getRotationOfChar(0)

let image = document.createElementNS('http://www.w3.org/2000/svg', 'image')
image.setAttributeNS(null, 'x', x)
image.setAttributeNS(null, 'y', y)
image.setAttributeNS(null, 'transform', `rotate(${rot} ${x} ${y})`)

或者在 svg.js 中

let text = mySVGJSText
let {x, y} = text.node.getStartPositionOfChar(0)
let rot = text.node.getRotationOfChar(0)

let image = new SVG.Image()
   .load(src)
   .size(width, height)
   .move(x, y)
   .transform({rotate: rot, cx: x, cy: y})

// or when you have your root element:
root.image(src, width, height).move....