Question

我尝试在x="50%" y="0"。

的SVG中编写文本元素

我的文字没有出现，我不知道为什么。

这是我的SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <text x="50%" y="0" text-anchor="middle" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;">xxxx</text>
</svg>

我不知道它会动态font-size。如果我给y="20"，我的文字会出现。但为什么呢？

正如我read所示，0 0是SVG的左上角。

为什么？如您所见，with和高度与viewBox相同。

我错过了什么吗？

Answer 1

为您的文本元素添加显性基线属性并设置为悬挂。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <text x="50%" y="0" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;" dominant-baseline="hanging">xxxx</text>
</svg>

您有三个选项可以更改此内容：

显性基线 - 用于确定或重新确定比例基线表

alignment-baseline - 指定要与哪个基线对齐   相应的父母基线

基线移位 - 允许相对于父母的显性基线重新定位显性基线

有关详情，请参阅此帖子：http://vanseodesign.com/web-design/svg-text-baseline-alignment/

Answer 2

根据SVG specification

罗马大写字母底部的Y坐标通常为零。小写罗马字母上的下降符号具有负坐标值。

Answer 3

在文本元素上，y是元素底部位置。在您的情况下，文本打印在视图框外。

尝试将y设置为20。

SVG位置从x =“0”y =“0”

3 个答案: