使用D3.js限制SVG中文本元素的宽度

Question

我使用的是D3.js.我在svg中创建了一个文本元素。 我有一个元素。

<text id="text16" class="text" x="xx" y="yy" 
transform="translate(tx,ty)" height="hh" 
text-anchor="left"">DC_AAA_BBB_CCC_XXXX</text> 

我想减少设置宽度。当文本元素宽度小于原始文本的长度（从.getComputedTextLength计算）时，我希望它显示为文本元素的宽度。这样，当原始文本长度更长时，只显示“DC_AAA_BBB_”。

我试着添加css - > width：100px; 也尝试在DOM中添加width属性 - > width =“100px”

两者都不起作用。我怎样才能做到这一点？谢谢！

Answer 1

您可以使用clip-path来裁剪您想要的任何形状，例如参见svg testsuite中的masking-path-01。

相关部分，限定夹路径：

<clipPath id="clip1"> 
    <rect x="200" y="10" width="60" height="100"/> 
    ... you can have any shapes you want here ... 
</clipPath> 

，然后应用这样夹子路径：

<g clip-path="url(#clip1)"> 
    ... your text elements here ... 
</g>