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

Question

I have an svg with outbound links to a ttf font and an image that I am trying to render correctly using phantomjs 2.1. Here's what I'm observing:

1. When I use the font link only, the text renders and has the expected font. (Of course, the image doesn't show up.)
2. When I use the image link only, and no font link, the image and text render, but the text has a default font.
3. When I use both the image link and the font link, the image renders, but the text disappears.
4. When I render the svg in Chrome with both the image link and the font link the text shows up with the expected font and the image renders nicely.

Extra Information:

• When I render the svg with phantom, I convert the links to local file links ('file://' + path) before rendering.
• Text font is listed as a src attribute in css.
• appears before in the svg What is going on here, and/or how can I work around the problem?

Edit: here's an example 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

This appears to be a bug in phantomjs rendering. For me the solution was to use a different binary: 1.9.8 instead of 2.1.1.