<g>の固定幅はどうすればわかりますか？

Question

私はSVGと、このようなチャートの伝説があります。各テキストは本当に長いものではなく、テキストが長い場合、それは大きな伝説（g）が不要に作れば

<g class="legend"> 
    <g class="scrollbox"> 
     <g><text>aaa</text></g> 
     <g><text>bbb</text></g> 
     <g><text>ccc</text></g> 
     <g><text>ddd</text></g> 
     <g><text>eee</text></g> 
    </g> 
    </g> 

これは良いでしょうが。

凡例（g）の幅を固定し、内側のテキストが長い場合は折り返したいと思っています。

どうすればこの問題を解決できますか？
私は実際にスタイルを<g>に与えることができないので、これを達成するために伝説の中にいくつかの要素を追加することはできますか？

Answer 1

はこれを試してみてください。

<style> 
text { 
    white-space: wrap; 
} 
</style> 

Answer 2

あなたは本当に長いテキストに楕円を追加する<text>に、このCSSルールを追加することができます。

エレメントにはtruncateクラスを追加するか、クラス固有修飾子を下のルールから削除してください。また

text.truncate { 
    width: /* Your preferred width */; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

：

.legend .scrollbox text { /* ... */ }