如何沿着SVG中的路径对齐组(而不是文本)? [英] How to align a group (instead of text) along a path in svg?

问题描述

假设我已以编程方式创建了一个圆圈和一些 text ，我想沿着圆圈对齐.我可以使用 textPath 元素来做到这一点.

此外，我还有一个矩形的图像(或任何svg组< g> )，我也想与该圈子对齐(下图中的红色矩形只是一个示例；实际上，我希望能够将任意svg组< g> 对齐为和弦图节点上的图像标签.)./p>

但是， textPath 似乎仅适用于 文本 元素.

=>是否有类似的东西适用于组元素?

还是我需要为组手动计算转化(从圆的切线开始)?

((一种解决方法可以是用单个字母创建一些隐藏文本，与我的小组人数相同...对齐并抓住其转变.但是，这很难看.)

解决方案

此外，我有一个矩形图像(或任何svg组)，也想与圆圈对齐(请参见下面的示例图片.

但是，textPath似乎仅适用于文本元素.

您可以使用矩形unicode字符▮

在这种情况下，您可以将它与其他单词一起包含在一个textPath命令中

 < svg width ="400" height ="400" viewBox ="0 0 400 400">< path id ="pathChain" d ="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style ="fill:#089421;"/>< text font-size ="36" font-family ="Times New Roman" fill =灰色">< textPath id ="result" startOffset ="7％" xlink:href =#pathChain">< tspan dx ="0" dy =-5" fill ="black" font-size ="48px">Hello World</tspan>< tspan dx =-20" dy =-10" fill ="red" font-size ="72px">&#9646;</tspan></textPath></text></svg>  

您可以使用任何适合您的unicode字符

 < svg width ="400" height ="400" viewBox ="0 0 400 400">< path id ="pathChain" d ="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style ="fill:#089421;"/>< text font-size ="36" font-family ="Times New Roman" fill =灰色">< textPath id ="result" startOffset ="7％" xlink:href =#pathChain">< tspan dx ="0" dy =-5" fill ="black" font-size ="48px">Hello World</tspan>< tspan dx =-5" fill ="red" font-size ="72px">&#11156;</tspan></textPath></text></svg>  

如有必要，可以制作字母的动画

 < svg width ="400" height ="400" viewBox ="0 0 400 400">< path id ="pathChain" d ="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style ="fill:#089421;"/>< text font-size ="36" font-family ="Times New Roman" fill =灰色">< textPath id ="result" xlink:href =#pathChain">< tspan dx ="0" dy =-5" fill ="black" font-size ="48px">Hello World</tspan>< tspan dx =-5" fill ="red" font-size ="72px">&#11156;</tspan>< animate dur ="10s" repeatCount ="5" attributeName ="startOffset" values ="5％; 50％; 50％; 5％; 5％"/></textPath></text></svg>  

Lets assume I have programmatically created a circle and some text, that I want to align along the circle. I am able to do so using the textPath element.

In addition I have a rectangular image (or any svg group <g>), that I also would like to align to the circle (the red rectangle in the image below is just an example; actually I would like to be able to align arbitrary svg groups <g> as image labels on the nodes of a chord diagram.).

However, textPath only seems to work for text elements.

=> Is there something similar that works for group elements?

Or do I need to manually calculate the transformation for my group (following from some tangent of the circle)?

(A workaround could be to create some hidden text with a single letter and the same size as my group ... align it and grab its transformation. However, that feels ugly.)

解决方案

In addition I have a rectangular image (or any svg group ), that I also would like to align to the circle (see red rectangle in the example image below).

However, textPath only seems to work for text elements.

You can use the rectangle unicode character ▮

In this case you will be able to include it in one textPath command along with other words

<svg width="400" height="400" viewBox="0 0 400 400">

 <path id="pathChain"  d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/> 

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"  startOffset="7%"   xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello World </tspan> <tspan dx="-20" dy="-10" fill="red" font-size="72px">  &#9646;</tspan>
</textPath>
</text>             
</svg>

You can use any unicode character that suits you

<svg width="400" height="400" viewBox="0 0 400 400">

 <path id="pathChain"  d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/> 

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"  startOffset="7%"   xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello World </tspan> <tspan dx="-5" fill="red" font-size="72px">  &#11156;</tspan>

</textPath>
</text>             
</svg>

If necessary, you can make the animation of the letters

<svg width="400" height="400" viewBox="0 0 400 400">

 <path id="pathChain"  d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/> 

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello World </tspan> <tspan dx="-5" fill="red" font-size="72px">  &#11156;</tspan>
 <animate  dur="10s" repeatCount="5" attributeName="startOffset" values="5%;50%;50%;5%;5%"/>  
</textPath>
</text>             
</svg>

这篇关于如何沿着SVG中的路径对齐组(而不是文本)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！