先上圖說話吧上圖為現(xiàn)狀，下圖為希望結(jié)果核心代碼如下(寫的不好，大家別見怪) <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
<!-- …… -->
<!-- 繪制節(jié)點(diǎn) -->
<g v-for="(node,i) in nodes" :key="i">
<!-- 節(jié)點(diǎn)標(biāo)題 -->
<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é)點(diǎn)列表 -->
<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)一。試了很久，也沒能解決這問題，希望路過的老司機(jī)帶下。
1 回答
斯蒂芬大帝
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
解決之法，foreignObject，使用方式如下：
<svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
<!-- …… -->
<!-- 繪制節(jié)點(diǎn) -->
<g v-for="(node,i) in nodes" :key="i">
<foreignObject width="node.width" height="node.height" x="node.x" y="node.y">
<!-- 節(jié)點(diǎn)標(biāo)題 -->
<p><img :src="node.titleImgSrc" />{{node.title}}</p>
<!-- 節(jié)點(diǎn)列表 -->
<p v-for="(list,i) in node.textList" :key="i"><img :src="list.dataType" />{{list.label}}</p>
</foreignObject>
</g>
</svg>添加回答
舉報(bào)
0/150
提交
取消