我尝试在父元素中居中SVG元素。然而,我发现Chrome和Safari之间存在差异。在Chrome上,下面的代码可以很好地将文本在正方形内居中,但在Safari上则不然:
<svg width="200px" height="200px">
<g transform="translate(70,70)">
<path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path&g
我需要在SVG中输出多行文本。为此,我使用了以下方案:
<text>
<tspan> First line </tspan>
<tspan> Second line </tspan>
</text>
文本的第一行和第二行可以有不同的字符数,这些字符数可以动态变化。我希望第二行出现在第一行的下面,并且两行中的文本都居中。
我可以通过为第二个<tspan>添加dy="15"来使第二行显示在第一行的下面。
我可以通过添加text-anchor="middle"来对齐每个单独的&
我正在使用svg.js创建包含文本和居中的圆圈,我能够做到这一点。
let draw = SVG('main');
// this is for the text
draw.plain(ele.ticket_id).attr({
x: posX,
y: posY,
fill: '#fff',
'alignment-baseline': 'central',
'text-anchor': '