幻影svg渲染：你如何避免渲染鏈接圖像和鏈接字體之間的衝突？

我有一個svg出站鏈接到一個ttf字體和一個圖像，我試圖使用phantomjs 2.1正確渲染。以下是我正在觀察的內容：幻影svg渲染：你如何避免渲染鏈接圖像和鏈接字體之間的衝突？

當我僅使用字體鏈接時，文本呈現並具有預期的字體。（當然，圖像不會顯示出來。）
當我僅使用圖像鏈接，並且沒有字體鏈接時，圖像和文本呈現，但文本具有默認字體。
當我使用圖像鏈接和字體鏈接時，圖像呈現，但文字消失。
當我使用圖像鏈接和字體鏈接在Chrome中呈現svg時，文本以預期的字體顯示，圖像呈現得很好。

額外的信息：

當我渲染幻影的SVG，我轉換鏈接到本地文件的鏈接（ '文件：//' +路徑）渲染之前。
文本字體在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>

來源

2016-06-24 Doug Bradshaw

請包含您的SVG。我們很難期望調試我們看不到的東西。有ESP的人不在這裏。他們都在參加會議或其他事情:) –

臨時解決方法：當我使用phantomjs 1.9.8而不是2.1.1進行渲染時，問題消失 –

這似乎是在phantomjs渲染的錯誤。對我來說，解決方案是使用不同的二進制：1.9.8而不是2.1.1。

來源

2016-07-11 19:11:48

幻影svg渲染：你如何避免渲染鏈接圖像和鏈接字體之間的衝突？

回答

相關問題