怎么在svg里设置文字的center位置

怎么在svg里设置文字的center位置


holdtom
浏览 1558回答 2
2回答

湖上湖

给你做了一个小demo。123456789101112131415161718<html>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<head>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<style>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div&nbsp;{&nbsp;width:&nbsp;300px;&nbsp;height:&nbsp;150px;&nbsp;background:&nbsp;#f06;&nbsp;font:&nbsp;bold&nbsp;150%&nbsp;sans-serif;&nbsp;text-shadow:&nbsp;0&nbsp;1px&nbsp;2px&nbsp;rgba(0,0,0,.5);&nbsp;overflow:&nbsp;hidden;&nbsp;resize:&nbsp;both;&nbsp;color:&nbsp;white;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;svg&nbsp;{&nbsp;width:&nbsp;100%;&nbsp;height:&nbsp;100%;&nbsp;pointer-events:&nbsp;none;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;{&nbsp;text-anchor:&nbsp;middle;&nbsp;pointer-events:&nbsp;auto;&nbsp;fill:&nbsp;currentColor;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p&nbsp;{&nbsp;font:&nbsp;italic&nbsp;100%&nbsp;Georgia,&nbsp;serif;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</style>&nbsp;&nbsp;&nbsp;&nbsp;</head>&nbsp;&nbsp;&nbsp;&nbsp;<body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<text&nbsp;x="50%"&nbsp;y="50%"&nbsp;dy=".3em">居中文字</text></svg>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;</body>&nbsp;</html>&nbsp;

米琪卡哇伊

示例<?xml version="1.0" encoding="iso-8859-1"?><svg width="800" height="600"><text style="fill:red;font-size:24pt" x="100" y="100";text-align:center>Hello World!</text></svg>&nbsp;
打开App,查看更多内容
随时随地看视频慕课网APP