[英]SVG text not horizontally center aligning
我使用 Adobe XD 生成了一个 SVG。 他们使用变换来定位东西,但我的迷你电脑屏幕上的文本并不总是相同的宽度(它是动态生成的)。 我已经尝试锚定,任何我能找到的东西,但它仍然没有用。 这是当前代码的样子:
这是代码:
<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041"> <g transform="translate(-397)"> <g transform="translate(507 975)" fill="#fff" stroke="#707070" strokeWidth="1" > <rect width="907" height="66" rx="33" stroke="none" /> <rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" /> </g> <rect width="119" height="395" transform="translate(901 613)" fill="#fff" /> <g transform="translate(397)" fill="#232323" stroke="#fff" stroke-width="30" > <rect width="1127" height="627" rx="103" stroke="none" /> <rect x="15" y="15" width="1097" height="597" rx="88" fill="none" /> </g> <text fill="white" fontSize="96" fontFamily="Fredoka" > {screenText} </text> </g> </svg>
你可以使用 transform/translate、 text-anchor和dominant-baseline将文本放在某物的中间。
body { background: gray; }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041"> <g transform="translate(600 975)" fill="#fff" stroke="#707070" stroke-width="1"> <rect x="-453.5" width="907" height="66" rx="33" stroke="none" /> <rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" /> </g> <rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" /> <g transform="translate(50)" fill="#232323" stroke="#fff" stroke-width="30"> <rect width="1127" height="627" rx="103" stroke="none" /> <rect x="15" y="15" width="1097" height="597" rx="88" fill="none" /> </g> <text fill="#fff" font-size="96" font-family="Fredoka" transform="translate(600 300)" text-anchor="middle" dominant-baseline="middle"> {screenText} </text> </svg>
感谢 Buhan Yu 的评论,我了解到您需要指定 x 和 y 以将其居中对齐。 我设置了x="50%"
并且成功了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.