在Chrome中，将SVG文本绘制到img元素时，字体不正确。

Question

在SVG中使用font-family渲染文本时，Chrome 32.0.1700.107会选择适当的字体。但是，如果我将相同的SVG用作img元素的输入，则使用错误的字体。如果我指定我知道在系统上的特定字体，则该字体将在svg和img元素中正确呈现。一个简单的例子：

<svg id="scalingSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
    <rect width="99%" height="99%" fill="white" stroke="black"/>
    <text id="myText" x="50%" y="50%" font-family = "monospace" font-size = "24">M~</text>
</svg> 
<img id="svgImage" x="0" y="0" height="100" width="100"/>

var xml = (new XMLSerializer).serializeToString(svg);
img.src = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(xml);

这是在jsfiddle上的代码。下拉框有通用字体系列，也有特定字体。特别地，如果您将下拉框设置为Courier New，则结果符合预期 - 字体在两个图像中都正确呈现。但是，如果将字体更改为“monospace”，则SVG元素将正确找到Courier New，而img元素将以不正确的非等宽字体呈现。IE、Firefox和Safari都按照我的预期工作 - 在svg和img元素中都找到了适当的字体系列。我是否发现了Chrome的一个错误，还是我没有理解指定字体的微妙之处？

- DerekMuk

---

看起来可能是Chrome的一个bug。你应该报告它。 - Paul LeBeau

Answer 1

这似乎与 "问题231572：SVGImage中的希伯来文本无法呈现（在SVG DOM中呈现）。" 有关。SVGImage具有内联SVG渲染器没有的源限制：

评论＃3：禁止从SVGImages加载外部资源，但我想它们不被禁止从缓存的资源加载？

评论#4：我们是否将字体视为外部资源？ 我想是的。如果将此测试包含在嵌入或对象中的HTML中，则此测试将无法正常工作。

- Foo Bar