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

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"则出现我的文字。 但是为什么呢？

正如我在这里阅读的 ， 0 0是SVG的左上角。

为什么？ 如您所见，with和height以及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规范

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

Answer 3

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

尝试将y设置为20。