SVG中的左对齐字母答案

【问题标题】：Left-align letters in SVGSVG中的左对齐字母
【发布时间】：2012-11-20 21:38:43
【问题描述】：

我在 SVG 图表中有两个文本标签：

<svg width="960" height="500"><g transform="translate(20,20)">
    <text class="title" dx="0px" dy="39px">1980-2012</text>
    <text class="cantontitle" dx="0px" dy="78px">Graubünden</text>
</svg>

我使用以下 CSS 样式：

svg {                                                                                       
    font: 10px sans-serif;                                                                  
}                                                                                           

.title {                                                                                    
    font: 300 78px Helvetica Neue;                                                          
    fill: #666;                                                                             
}                                                                                           

.cantontitle {                                                                              
    font: 300 40px Helvetica Neue;                                                                                                     
    fill: #666;                                                                             
}

很遗憾，字符没有正确左对齐。

是否可以正确左对齐两个<text> 元素的第一个字符？

这是一个便于测试的 jsfiddle：http://jsfiddle.net/UMnnP/1/

【问题讨论】：

它们是左对齐的，至少在字体方面（见this screenshot）。
是的，我知道，但是 SVG 知道路径，所以应该可以对齐字符路径的最左边的点。
我认为仅使用 css 和 html 是不可能的。例如通过放置 2980 而不是 1980 进行测试，您会看到左对齐更接近您想要的。你也许可以用 javascript 解决这个问题...
我认为可能有一些 svg 属性...如果不确定，那也是一个可以接受的答案。

标签： css svg

【解决方案1】：

文本左对齐。偏移量是由字体中字形的度量引起的。与简单路径不同，字形具有额外的度量定义，定义了它“居住”在其中的矩形。这个矩形的左端独立于字形图形的左端，它可以有一个负偏移和正偏移。除了 font-metric 之外，特殊字形对还添加了字距调整。

要将字形完全准确地对齐到左侧，您需要将文本转换为路径，或者您可以尝试通过检查字形的度量来获取偏移量，如果您有 svg 格式的字体，这很容易实现。但总而言之，这可能会变得非常乏味，并且需要一点点手写偏移来纠正，这可以节省您数小时的编码时间，但如果您真的需要它，我强烈建议您联系字体及其指标。

您好……

编辑：

你的 CSS 不工作！只是看到太晚了……

一定是：

font-family : Helvetica Neue

而不是

font : Helvetica Neue

有了这个，它就更左对齐了……

【讨论】：

谢谢！关于字体属性，这是有效的 SVG CSS（尽管“Helvetica Neue”应该放在双引号中）。