垂直对齐SVG文本与其他SVG对象以使用Inkscape
我试图在另一个SVG对象下对齐SVG文本。这个带有SVG行的示例在Firefox中运行得很好：
<svg>
<line x1='0' y1='100' x2='100' y2='100' stroke='red'/>
<text x='50' y='100' text-anchor='middle' font-size='24' style="dominant-baseline: text-before-edge">Text</text>
</svg>边框正好是从下面接触到的线，可以通过选择/高亮显示文本来看到。
然而，遗憾的是Inkscape还不支持与dominant-baseline-style垂直对齐。(尽管与text-anchor的水平对齐似乎很受支持。)但我需要Inkscape的支持。我找到了一个在Inkscape中工作的transform-hack，但我想不出如何获得与dominant-baseline: text-before-edge-effect相同的效果。(How to center SVG text vertically in IE9)
更新
我使用带有JavaScript的浏览器来生成svg。因此，可以(重新)计算SVG文本元素在浏览器中的位置，使其可用于Inkscape。但是，即使这个扩展是显式的(从上面建议的transform-hack中隐式的)，我仍然缺乏解决方案。
回答 2
Stack Overflow用户
发布于 2014-04-19 12:40:30
试试dy怎么样？：
<svg>
<line x1='0' y1='100' x2='100' y2='100' stroke='red'/>
<text x='50' y='100' text-anchor='middle' font-size='24' dy="1em">Text</text>
</svg>您可以通过调整em值来调整文本在行下面的位置。同样的em值应该适用于所有字体大小-只要字体是相同的。
但还没有检查它是否适用于Inkscape ..。
更新
好的。如果我们在dy元素上指定一个<text>，Inkscape看起来就不喜欢它了。但是如果dy是在<tspan>上的话，那就没问题了。而且，它也不会接受ems作为一个单元。它需要像素。因此，如果我们相应地更新我的样本：
<svg>
<line x1='0' y1='100' x2='100' y2='100' stroke='red'/>
<text x='50' y='100' text-anchor='middle' font-size='24'>
<tspan dy="19">Text</tspan>
</text>
</svg>Inkscape会把它装好。唯一的问题是，您将不得不调整dy值的每一个字体和字体大小的使用。
Stack Overflow用户
发布于 2014-11-25 01:37:45
我只是解决了一个像你这样的问题，并想分享我的方法。
我正在呈现一个文本，并且我已经使用inkscape --query-all tempfile.svg来获取关于我想要排版的行长度的度量标准。
最后，我试图通过在所选字体 (Droid，现在)上显示一个大写字母"M“来计算基线，然后使用查询的高度来计算基线偏移量：
$baseline=$fontSize*$previousBaseline/$previousFontSize;这是..。非常粗糙，但它很好地与inkscape一起工作。
https://stackoverflow.com/questions/23166767
复制相似问题
腾讯云开发者
