先上圖說話吧上圖為現狀，下圖為希望結果核心代碼如下(寫的不好，大家別見怪) <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處理文本溢出的方式，但是沒起效；試過用字符數截取的方法，但是英文字符的大小差異較大，參數難以統一。試了很久，也沒能解決這問題，希望路過的老司機帶下。
1 回答
斯蒂芬大帝
TA貢獻1827條經驗 獲得超8個贊
解決之法，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>添加回答
舉報
0/150
提交
取消