简体   繁体   English

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

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

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. 我想在文本的开头和/或结尾放置一个SVG图像。 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. 文本是动态的,因此需要插入功能区的点可以更改为路径上的任何点。

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 或在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....

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM