Question

我正在尝试使用svg.js在路径中间实现文本定位。下面我可以通过svg ...

filter {
  if [@metadata][rabbitmq_properties][content-encoding] == "gzip" {
    ruby {
      ...
    }
  }
}

image of text on path

以下是当前用于实现以上目的的JavaScript代码。但是我不知道svg.js API上的其他任何属性可以指定文本应位于路径的中间基线上。

<svg width="140" height="140">
<defs>
    <path id="textPlot" d="M68,27 L 51 31 39 39 29 52 26 69 31 86 41 99 55 108 70 111 86 108 99 98 107 85 111 68 106 49 99 39 87 30" fill="#ddd" stroke="#ddd"></path>
</defs>
<text style="font-size: 20px;">
    <textPath xlink:href="#textPlot" startOffset="50%" text-anchor="middle">text align in middle</textPath>
</text>
</svg>

Answer 1

您可以致电<textPath>来获得text.textPath()的孩子。有了该元素后，就可以设置所需的所有属性。

SVG('svgNodeId').text('center my text in path')
  .attr({id:'myText'})
  .font({size:15})
  .path('M65,25 L 42 35 28 53 27 77 37 93 52 103 69 108 90 100 104 84z')
  .textPath()
  .attr({startOffset: '50%', 'text-anchor': 'middle'})

svg.js在路径中间放置文本

1 个答案: