Question

在示例http://jsfiddle.net/q5yN3/1/中，任何人都可以告诉我为什么文本示例会崩溃并且无法正常显示？我是否遗漏了标签的某些属性，还是应该以不同方式添加它？

    <text font-family="Tahoma" font-size="8" text-anchor="middle" transform="translate(533316.59375 -4757133.5)">Text Example</text>

我正在使用Firefox。

谢谢！

Answer 1

文本元素位于<g>元素内，该元素具有应用于其的极端缩小比例因子：

<g transform="translate(0 85) scale(1)">
    <g transform="translate(221 2952) scale(0.000607469)">
        <text font-family="Tahoma" font-size="8" text-anchor="middle" 
        transform="translate(533316.59375 -4757133.5)"
        >Text Example</text>

该比例因子也适用于字体大小，因此您的文本被绘制为8px * 0.000607469 =像素高的一小部分。文本在其他浏览器中可见的唯一原因是因为可访问性功能阻止它们绘制超小文本。

解决方案只是从<g>元素上的<text>元素反转比例因子：

<g transform="translate(0 85) scale(1)">
    <g transform="translate(221 2952) scale(0.000607469)">
        <text font-family="Tahoma" font-size="8" text-anchor="middle" 
        transform="translate(533316.59375 -4757133.5) scale(1646)"
        >Text Example</text>

请注意，在转换后添加了反向比例，因此转换的单位仍然是缩放坐标。

SVG文本错误 - 文本被折叠并且无法正确显示

1 个答案: