Question

我有一个svg，其中包含指向ttf字体的出站链接以及我尝试使用phantomjs 2.1正确呈现的图像。这是我正在观察的内容：

当我仅使用字体链接时，文本呈现并具有预期的字体。（当然，图像没有显示出来。）
当我仅使用图像链接而没有字体链接时，图像和文本呈现，但文本具有默认字体。
当我同时使用图像链接和字体链接时，图像会渲染，但文本会消失。
当我使用图片链接和字体链接在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

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.

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

1 个答案: