Phantom SVG渲染:如何避免链接图像和链接字体之间的碰撞

Question

我有一个带有出站链接到TTF字体的SVG和我试图使用Phantomjs 2.1正确渲染的图像。这是我要观察的：

1. 当我仅使用字体链接时，文本会呈现并具有预期的字体。（当然，图像不会显示。）
2. 当我仅使用图像链接而没有字体链接时，图像和文本渲染，但是文本具有默认字体。
3. 当我同时使用图像链接和字体链接时，图像呈现，但文本消失了。
4. 当我用映像链接和字体链接呈现Chrome中的SVG时，文本带有预期字体，图像呈现出很好的呈现。

额外信息：

• 当我用幻影渲染SVG时，我将链接转换为本地文件链接（'file：//' path）。
• 文本字体被列为CSS中的SRC属性。
• 出现在SVG之前这里发生了什么和/或如何解决问题？

编辑：这是一个示例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。