svg标签中的text标签文本如何处理溢出？

Question

先上图说话吧

上图为现状，下图为希望结果

核心代码如下(写的不好，大家别见怪)

    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!-- …… -->
      <!-- 绘制节点 -->
      <g v-for="(node,i) in nodes" :key="i">
        <!-- 节点标题 -->
        <rect :x="node.x+30" :y="node.y+5" width="20" height="20" :fill="`url(#titleIcon)`"/> 
        <text :x="node.x+50" :y="node.y+flow.lineHeight">{{node.title}}</text>
        <!-- 节点列表 -->
        <g v-for="(list,i) in node.textList" :key="i">
          <rect :x="node.x+5" :y="node.y+(i+1)*flow.lineHeight+6" width="20" :height="flow.lineHeight-2" :fill="`url(#${list.dataType})`" />
          <text :x="node.x+28" :y="node.y+(i+2)*flow.lineHeight">{{list.label }}</text>
        </g>
      </g>
    </svg>

试过用CSS处理文本溢出的方式，但是没起效；
试过用字符数截取的方法，但是英文字符的大小差异较大，参数难以统一。
试了很久，也没能解决这问题，希望路过的老司机带下。

Answer 1

解决之法，foreignObject，使用方式如下：&nbsp;&nbsp;&nbsp;&nbsp;<svg&nbsp;:width="panelObj.panelWidth"&nbsp;:height="panelObj.panelHeight"&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;……&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;绘制节点&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<g&nbsp;v-for="(node,i)&nbsp;in&nbsp;nodes"&nbsp;:key="i"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<foreignObject&nbsp;width="node.width"&nbsp;height="node.height"&nbsp;x="node.x"&nbsp;y="node.y"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;节点标题&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p><img&nbsp;:src="node.titleImgSrc"&nbsp;/>{{node.title}}</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;节点列表&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;v-for="(list,i)&nbsp;in&nbsp;node.textList"&nbsp;:key="i"><img&nbsp;:src="list.dataType"&nbsp;/>{{list.label}}</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</foreignObject>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</g> &nbsp;&nbsp;&nbsp;&nbsp;</svg>