如何在svg中沿路径对齐组而不是文本？

如何解决如何在svg中沿路径对齐组而不是文本？

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

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

但是，textPath 似乎仅适用于 text 元素。

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

还是我需要为组手动计算转化 （从圆的切线开始）？

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

解决方法

此外，我有一个矩形图像（或任何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="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>

您可以使用任何适合您的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="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>

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

<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>

@Paul LeBeau 评论：

没有，没有自动的方法可以做到这一点。你必须定位你自己

考虑使用绝对定位将svg图像添加到文本中

由于SVG中的任何文本都是矢量对象，因此它具有绝对坐标x,y，作为单词的第一个字符和最后一个字符。

使用此图标，您可以将图标或任何其他矢量图像放置在文本的开头或结尾。

我将图标放在<symbol>标签中，并使用<use>标签将其放置在单词的末尾

<use xlink:href="#speaker" x="245" y="35" />

<svg width="400" height="400" viewBox="0 0 400 400">
<symbol>
<g id="speaker" style="transform-origin:center;transform-box: fill-box;transform:rotate(15deg);" >
    <path fill="#089421" d="M28,7.1v2c7.3,1,13,7.3,14.9s-5.7,13.9-13,14.9v2c8.4-1,15-8.2,15-16.9S36.4,8.1,28,7.1z"/>
    <path fill="#546E7A" d="M14,32H7c-1.1,0-2-0.9-2-2V18c0-1.1,0.9-2,2-2h7V32z"/>
    <polygon fill="#78909C" points="26,42 14,32 14,16 26,6"/>
    <path fill="#089421" d="M28,17.3v2.1c1.8,0.8,3,2.5,4.6s-1.2,3.8-3,4.6v2.1c2.9-0.9,5-3.5,5-6.7S30.9,18.2,17.3z"/>
    <path fill="#089421" d="M28,12.2v2c4.6,0.9,8,5,9.8s-3.4,8.9-8,9.8v2c5.7-1,10-5.9,10-11.8S33.7,13.1,12.2z"/>
</g>
</symbol>
 <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 Wordl </tspan> 
  </textPath>
</text> 
<use xlink:href="#speaker"  x="245" y="35" />  
          
</svg>

一个示例，其中一行带有一行不断增长的文字和图标。

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1">
<symbol id="grow">
  <g>
    <circle fill="#FF9800" cx="28" cy="9" r="5"/>
</g>
<path fill="#00796B" d="M29,27.3l-9.2-4.1c-1-0.5-1.5,1-2,2c-0.5,1-4.1,7.2-3.8,8.3c0.3,1.1,1.4,1.9,1.4c0.2,0.4,0.6-0.1  L28.8,31c0.8-0.2,1.4-1,1.4-1.8C30.2,28.4,29.7,27.6,29,27.3z"/>
<path fill="#009688" d="M26.8,15.2l-2.2-1c-1.3-0.6-2.9,0-3.5,1.3L9.2,41.1c-0.5,2.2,2.7c0.3,0.1,0.6,0.2,0.2  c0.8,1.5-0.4,1.8-1.1c0,9.6-13.3,10.4-14.9s4.9-9.3,4.9-9.3C28.7,17.4,28.2,15.8,26.8,15.2z"/>
<path fill="#FF9800" d="M40.5,15.7c-0.7-0.8-2-1-2.8-0.3l-5,4.2l-6.4-3.5c-1.1-0.6-2.6-0.4-3.3,0.9c-0.8,1.3-0.4,2.9,3.4  l8.3,3.4c0.3,0.2c0.5,0.9-0.2,1.3-0.5l6-5C41.1,17.8,41.2,16.6,40.5,15.7z"/>
<path fill="#FF9800" d="M11.7,23.1l3.4-5.1l4.6,0.6l1.5-3.1c0.4-0.9,1.2-1.4,2.1-1.5c-0.1,0-0.2,0h-9c-0.7,0-1.3,0.3-1.7,0.9  l-4,6c-0.6,0.9-0.4,2.8C9.2,23.9,9.6,24,10,24C10.6,11.3,23.7,11.7,23.1z"/>
</symbol>  
  
  <path id="txtPath" d="m22 366c0 0 59-24 74-50C132 253 129 213 128 161 125 33 200 2 200 2" style="fill:none;stroke:#00796B;stroke-width:3"/> 
  
  <use xlink:href="#grow" x="123" y="10" /> 
  <text dx="0" dy="-10px" font-size="20"  font-family="Times New Roman" fill="#414141" >
    <textPath id="result"  startOffset="5%"    xlink:href="#txtPath"> Stock growth in the first half of the year </textPath>
  </text>
</svg>

另一个例子

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1">
 <symbol id="Cactus" style="transform-origin:center;transform-box: fill-box;transform:rotate(15deg);">
  <path fill="#7CB342" d="M35.3,9.6c-1.6-0.2-1.3,0.9-1.9,2.7l-1,4.3c-0.3,1-0.7,1.4-2,1.3L25,17.3c-1.6-0.2-3.1,1-3.2,2.6  c-0.2,1.6,3.1,2.6,3.2l6.3,0.7c3,0.3,5.5-0.9,6-5.4c0,0.6-4.7,0.3-6.6C36.7,10.2,36.6,9.7,35.3,9.6z"/>
<path fill="#7CB342" d="M12.2,13.6c1.6-0.1,1.3,2.8l1.3,6.3c0.3,0.7,2,1.3l5.4-0.4c1.6-0.1,3.2,2.7  c0.1,1.6-1.1,3-2.7,3.2l-6.3,0.5c-3,0.2-5.5-1-5.9-5.5c0,0-0.8-6.7-0.5-8.5C10.7,14.2,10.8,13.7,12.2,13.6z"/>
<path fill="#8BC34A" d="M24,5c-2.4,0-4,0.6-4.5,3.2c0,0-2.1,16.9,32.1c0.3,1.2,4.4,1.2s3.8,2.7,4.4-0.8  c2.5-15.1,0-32.6,0-32.6C27.7,5.2,26.4,5z"/>
<path fill="#FFB74D" d="M38.8,43H9.2c0,4.9-2.3,14.8-2.3S38.8,43,38.8,43z"/>
 </symbol>
  <path id="txtPath" d="m200 2c0 0 36 31 57 42 15 8 34 6 47 16 15 11 26 27 33 43 8 18 2 41 11 58 9 17 41 40 41 40" fill="none" stroke="green" stroke-width="2"/> 
 
 <use xlink:href="#Cactus" x="355" y="150" /> 
  
  <text font-size="20"  font-family="Times New Roman" fill="grey" >
  <textPath id="result" startOffset="7%"   xlink:href="#txtPath">
    <tspan dx="0" dy="-5"  fill="black" >Decrease in stocks per year </tspan> 
  </textPath>
</text> 
</svg>

这里是我提到的解决方法作为起点。它使用一些不可见的占位符文本，并使用

提取转换信息

placeHolder.getBoundingClientRect();

和

placeHolder.getRotationOfChar(0);

结果只是一个近似值，取决于字体大小和占位符的字符。

var svg = document.getElementById('svg');
var text = document.createElement('text');
text.setAttribute('fill','black');
svg.appendChild(text);

var placeHolder = document.getElementById('placeholder');
var placeHolderBounds = placeHolder.getBoundingClientRect();
var angle = placeHolder.getRotationOfChar(0);

var group = document.getElementById('my-group');
var groupBounds = group.getBoundingClientRect();
var dx = 0; //groupBounds.width/2;   
var dy = -groupBounds.height;   
var x = placeHolderBounds.x;
var y = placeHolderBounds.y;

var transform = 'translate(' + x +','+ y +') '+ 
                 'rotate('+ angle +') '+ 
                 'translate('+ dx +','+ dy +')';
group.setAttribute('transform',transform);

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


<path id="my-path"  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;"/> 
<g id="my-group">
  <rect  width="30" height="20" style="fill:red"/>
</g>


<text font-size="12px" >
    <textPath startOffset="10%" xlink:href="#my-path">
      <tspan>Hello World</tspan><tspan id='placeholder' visibility="hidden" >-</tspan>
    </textPath>
  </text>
</svg>

如何在svg中沿路径对齐组而不是文本？

如何解决如何在svg中沿路径对齐组而不是文本？

解决方法

相关推荐