鍍金池/ 問答/UI  室內(nèi)設(shè)計  HTML/ svg標簽中的text標簽文本如何處理溢出？

svg標簽中的text標簽文本如何處理溢出？

先上圖說話吧

clipboard.png

上圖為現(xiàn)狀，下圖為希望結(jié)果
clipboard.png

核心代碼如下(寫的不好，大家別見怪)

    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!-- …… -->
      <!-- 繪制節(jié)點 -->
      <g v-for="(node,i) in nodes" :key="i">
        <!-- 節(jié)點標題 -->
        <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>
        <!-- 節(jié)點列表 -->
        <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處理文本溢出的方式，但是沒起效；
試過用字符數(shù)截取的方法，但是英文字符的大小差異較大，參數(shù)難以統(tǒng)一。
試了很久，也沒能解決這問題，希望路過的老司機帶下。

回答
編輯回答
生性

解決之法，foreignObject，使用方式如下：

    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!-- …… -->
      <!-- 繪制節(jié)點 -->
      <g v-for="(node,i) in nodes" :key="i">
        <foreignObject width="node.width" height="node.height" x="node.x" y="node.y">
          <!-- 節(jié)點標題 -->
          <p><img :src="node.titleImgSrc" />{{node.title}}</p>
          <!-- 節(jié)點列表 -->
          <p v-for="(list,i) in node.textList" :key="i"><img :src="list.dataType" />{{list.label}}</p>
        </foreignObject>  
      </g>
    </svg>
2017年4月18日 06:46