css - 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> 的第一个字符正确地左对齐？元素？

这里有一个 jsfiddle 更容易测试:http://jsfiddle.net/UMnnP/1/

Answer 1

文本左对齐。偏移量是由字体中字形的规范引起的。与简单路径不同，字形具有额外的度量定义，这些定义定义了它“存在”的矩形。此矩形的左端独立于字形图形的左端，它可以有负偏移和正偏移。除了字体规范之外，字距也被添加到特殊的字形对中。

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

问候……

编辑:

你的CSS不工作!才看到太晚了……

必须是:

font-family : Helvetica Neue

代替

font : Helvetica Neue

这样它就更左对齐了……