How to Place an SVG Image at the Beginning of Text on a TextPath

Question

Here is an image of what I'm trying to achieve.

I have some text that is curving along a path. I want to place an SVG image at the beginning and/or end of the text. In this example it's a ribbon. But how can I place the ribbon at the beginning/end of the text and have it's rotation match the text on the path? The text is dynamic so the point where the ribbon needs to be inserted can change to any point on the path.

Get the location of the first character https://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getStartPositionOfChar. Get the rotation via https://www.w3.org/TR/SVG/text.html#__svg__SVGTextContentElement__getRotationOfChar Position accordingly — Robert Longson, Jan 15 '18 at 18:11

score 0 · Answer 1 · answered Jun 14 '18 at 18:56

To wrap the comment into an answer, here is how you would do it:

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})`)

or in 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....

How to Place an SVG Image at the Beginning of Text on a TextPath

1 Answers1