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计算）时，我希望它显示文本元素宽度。这样只能达到＆＃34; DC_AAA_BBB _＆＃34;在原始文本长度较长时显示。

我尝试过添加css - ＆gt;宽度：100px; 还尝试在DOM中添加width属性 - ＆gt;宽度=＆＃34; 100像素＆＃34;

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

Answer 1

您可以使用clip-path剪裁到您想要的任何形状，请参阅svg测试套件中的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>