2

我在 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/

4

1 回答 1

1

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

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

问候……</p>

编辑：

你的CSS不起作用！只是看到太晚了……</p>

一定是：

font-family : Helvetica Neue

代替

font : Helvetica Neue

有了这个，它就更左对齐了……</p>

于 2012-11-20T13:38:43.700 回答