首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >垂直对齐SVG文本与其他SVG对象以使用Inkscape

垂直对齐SVG文本与其他SVG对象以使用Inkscape
EN

Stack Overflow用户
提问于 2014-04-19 06:31:27
回答 2查看 2.5K关注 0票数 3

我试图在另一个SVG对象下对齐SVG文本。这个带有SVG行的示例在Firefox中运行得很好:

代码语言:javascript
复制
<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中隐式的),我仍然缺乏解决方案。

EN

Stack Overflow用户

发布于 2014-11-25 01:37:45

我只是解决了一个像你这样的问题,并想分享我的方法。

我正在呈现一个文本,并且我已经使用inkscape --query-all tempfile.svg来获取关于我想要排版的行长度的度量标准。

最后,我试图通过在所选字体 (Droid,现在)上显示一个大写字母"M“来计算基线,然后使用查询的高度来计算基线偏移量:

代码语言:javascript
复制
$baseline=$fontSize*$previousBaseline/$previousFontSize;

这是..。非常粗糙,但它很好地与inkscape一起工作。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23166767

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档