Question

我想将文本右对齐，在这种情况下，我必须以固定的宽度制作文本。因为文本内容是动态添加的。

<text>
  <tspan x="421" y="15" text-anchor="right"
     baseline-shift="0%" kerning="0" 
     font-family="Arial" font-weight="bold"
     font-size="12" fill="#490275" xml:space="preserve">
       This is entered by user.
</tspan>
</text>

Answer 1

您可能正在寻找textLength属性：

textLength属性用于在各种条件下保留SVG文本的显示宽度范围，例如未加载的webfonts。它可以应用于<text>或<tspan>元素。

<text>
  <tspan x="421" y="15" text-anchor="right"
     baseline-shift="0%" kerning="0" 
     font-family="Arial" font-weight="bold"
     font-size="12" fill="#490275" xml:space="preserve"
     textLength="SOME_LENGTH_VALUE">
       This is entered by user.
</tspan>
</text>

SOME_LENGTH_VALUE的类型为<length>

Answer 2

我认为您的尝试已接近，您只是使用text-anchor="end"的错误值。如果您使用x，它会将文本对齐到元素的右侧。

因此，我们可以将tspan的{{1}}位置设置为100%，并与text-anchor="end"一起将文本放置在右侧，无论长度如何。

＆＃13;

<svg width="100%" height="110">
  <text>
  <tspan x="100%" y="15" text-anchor="end"
     baseline-shift="0%" kerning="0" 
     font-family="Arial" font-weight="bold"
     font-size="12" fill="#490275" xml:space="preserve">
       This is entered by user.
</tspan>
</text>
  Sorry, your browser does not support inline SVG.  
</svg>

＆＃13;

是否可以将svg的<text> / <tspan>设置为固定宽度？

2 个答案: