Phantom svg 渲染：如何避免链接图像和链接字体渲染之间的冲突？

Question

我有一个带有出站 links 到 ttf 字体的 svg 和我试图使用 phantomjs 2.1 正确渲染的图像。这是我观察到的：

当我仅使用 link 字体时，文本呈现并具有预期的字体。（当然，图片没有出现。）
当我只使用图像 link 而没有使用字体 link 时，图像和文本呈现，但文本具有默认字体。
当我同时使用图像 link 和字体 link 时，图像呈现，但文本消失了。
当我在 Chrome 中使用图像 link 和字体 link 渲染 svg 时，文本以预期的字体显示并且图像渲染得很好。

额外信息：

当我用 phantom 渲染 svg 时，我在渲染之前将 links 转换为本地文件 links（'file://' + 路径）。
文本字体在 css 中列为 src 属性。
出现在 svg 之前这是怎么回事，and/or 我该如何解决这个问题？

编辑：这是一个 svg 示例：

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
    xml:space="preserve"
    x="0px"
    y="0px"
    width="704px"
    height="200px"
    viewBox="0 0 704 200"
    enable-background="new 0 0 704 200"
    id="integrity-lending-01"
>
<defs>
    <text id="meta-name">integrity-lending-01</text>
    <text id="meta-template-type">DYNAMIC</text>
    <text id="meta-owner">Insert user ID here</text>
    <text id="meta-organization">Insert org ID here</text>
    <text id="meta-description">Displays Interest Rates</text>
    <g id="meta-sizes">
        <text x="704" y="200" class="native" />
    </g>
    <style type="text/css"><![CDATA[

        @font-face
        {
            font-family: "Robot";
            font-weight: bold;
            src: url("/static/ad-templates/integrity-lending-01/18558.ttf");
            font-style: normal;
        }
        text
        {
            fill: orangeRed;
            font-size: 48pt;
            font-family: Robot;
        }

        /* part of the template rendering */
        .outline
        {
            fill: none;
            stroke: #333;
        }

        .error
        {
            color: #FF00E3;
            fill: red;
        }
    ]]></style>

</defs>
<image
    xlink:href="/static/ad-templates/integrity-lending-01/IntegrityLending_LowRates-Billboard.jpg"
    x="0"
    y="0"
    width="704"
    height="200"
/>
<text
    field-id="wait-time"
    field-ref="insert dyno ID here"
    field-width="612" class="template-field"
    x="200"
    y="135"
    text-anchor="middle"
>
    4.15
</text>

Answer 1

这似乎是 phantomjs 渲染中的错误。对我来说，解决方案是使用不同的二进制文件：1.9.8 而不是 2.1.1.

Phantom svg 渲染：如何避免链接图像和链接字体渲染之间的冲突？

Phantom svg rendering: how do you avoid a collision between rendering of linked images and linked font?

svg

truetype

phantomjs