SVG中的左对齐字母

Question

我在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>元素的第一个字符？

这是一个更容易测试的方法：http://jsfiddle.net/UMnnP/1/

Answer 1

文字左对齐。偏移量由字体中字形的度量标准引起。与简单路径不同，字形具有额外的度量定义，这些定义定义了它“生活”的矩形。此矩形的左端独立于字形图形的左端，它可以具有负偏移和正偏移。除字体度量外，还将字距调整添加到特殊的字形对中。

要将字形完全准确地对齐到左边，您需要将文本转换为路径，或者您可以通过检查字形的度量来尝试获取偏移量，如果您使用svg格式的字体，则可以轻松实现。但总而言之，这可能变得非常繁琐，并且有一点手写的偏移量可以帮助您节省数小时的编码时间，但如果您确实需要它，我强烈建议您与字体及其指标保持联系。

...问候

修改

你的css不起作用！我刚看到它太晚了......

必须是：

font-family : Helvetica Neue

而不是

font : Helvetica Neue

有了它，它就更加左对齐......