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，使用方式如下：

    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!-- …… -->
      <!-- 绘制节点 -->
      <g v-for="(node,i) in nodes" :key="i">
        <foreignObject width="node.width" height="node.height" x="node.x" y="node.y">
          <!-- 节点标题 -->
          <p><img :src="node.titleImgSrc" />{{node.title}}</p>
          <!-- 节点列表 -->
          <p v-for="(list,i) in node.textList" :key="i"><img :src="list.dataType" />{{list.label}}</p>
        </foreignObject>  
      </g>
    </svg>

Answer 2