Phantom Svg-Rendering: Wie vermeiden Sie eine Kollision zwischen dem Rendern von verknüpften Bildern und verknüpften Schriften?

Question

Ich habe eine SVG mit ausgehenden Links zu einer TTF-Schriftart und ein Bild, das ich versuche, korrekt mit Phantomjs 2.1 zu rendern. Hier ist, was ich beobachte:

1. Wenn ich nur die Schriftart-Link verwenden, rendert der Text und hat die erwartete Schriftart. (Natürlich wird das Bild nicht angezeigt.)
2. Wenn ich nur die Bildverknüpfung und keine Schriftverknüpfung verwende, werden Bild und Text gerendert, aber der Text hat eine Standardschriftart.
3. Wenn ich sowohl die Bildverknüpfung als auch die Schriftverknüpfung verwende, rendert das Bild, aber der Text verschwindet.
4. Wenn ich die Svg in Chrome mit der Bildverknüpfung und der Schriftverknüpfung rendert, wird der Text mit der erwarteten Schriftart angezeigt und das Bild wird gut gerendert.

Zusätzliche Informationen:

• Als ich das svg mit Phantom machen, konvertiere ich die Links zu dem lokalen Dateiverknüpfungen ('file: //' + Pfad) vor dem Rendern.
• Textschriftart wird als ein src-Attribut in CSS aufgeführt.
• erscheint zuvor in der Svg Was ist hier los, und/oder wie kann ich das Problem umgehen?

Edit: hier ist ein Beispiel 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

Dies scheint ein Fehler in PhantomJS Rendering zu sein. Für mich bestand die Lösung darin, eine andere Binärdatei zu verwenden: 1.9.8 statt 2.1.1.