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

【问题标题】：Limiting Width on a Text element in SVG using D3.js使用 D3.js 限制 SVG 中文本元素的宽度
【发布时间】：2018-01-02 09:04:12
【问题描述】：

我正在使用 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="100px"

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

【问题讨论】：

【解决方案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>

【讨论】：