使用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>