svg - batik SVG 到 PDF 的转换

Question

我正在尝试使用 batik 将 SVG 转换为 JPG。
在 SVG 中，我使用的是外部谷歌字体，因此不幸的是这失败并出现以下错误:

org.w3c.dom.DOMException: https://fonts.googleapis.com/css?family=Tangerine:
Invalid CSS document.
The "src" property does not support function values.
    at org.apache.batik.css.engine.CSSEngine.parseStyleSheet(Unknown Source)
    at org.apache.batik.css.engine.CSSEngine.parseStyleSheet(Unknown Source)
    at org.apache.batik.css.engine.CSSEngine.parseStyleSheet(Unknown Source)
    at org.apache.batik.css.engine.CSSEngine.parseStyleSheet(Unknown Source)
    at org.apache.batik.anim.dom.SVGOMStyleElement.getCSSStyleSheet(Unknown Source)
    at org.apache.batik.css.engine.CSSEngine.getStyleSheetNodes(Unknown Source)
    at org.apache.batik.css.engine.CSSEngine.getCascadedStyleMap(Unknown Source)
    at org.apache.batik.css.engine.CSSEngine.getComputedStyle(Unknown Source)
    at org.apache.batik.bridge.CSSUtilities.getComputedStyle(Unknown Source)
    at org.apache.batik.bridge.CSSUtilities.convertVisibility(Unknown Source)
    at org.apache.batik.bridge.SVGSVGElementBridge.createGraphicsNode(Unknown Source)
    at org.apache.batik.bridge.GVTBuilder.build(Unknown Source)
    at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown Source)
    at org.apache.batik.transcoder.image.ImageTranscoder.transcode(Unknown Source)
    at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown Source)
    at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown Source)
    at Test.main(Test.java:27)

有没有办法解决这个问题，或者有一种简单的方法来扩展 batik 以支持这一点？

这是我使用的Java代码:

import java.io.*;

import org.apache.batik.transcoder.image.JPEGTranscoder;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;

public class Test {

    public static void main(String[] args) throws Exception {

        // Create a JPEG transcoder
        JPEGTranscoder t = new JPEGTranscoder();

        // Set the transcoding hints.
        t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY,
                   new Float(.8));

        // Create the transcoder input.
        String svgURI = new File(args[0]).toURL().toString();
        TranscoderInput input = new TranscoderInput(svgURI);

        // Create the transcoder output.
        OutputStream ostream = new FileOutputStream("out.jpg");
        TranscoderOutput output = new TranscoderOutput(ostream);

        // Save the image.
        t.transcode(input, output);

        // Flush and close the stream.
        ostream.flush();
        ostream.close();
        System.exit(0);
    }
}

这是我的 SVG 文件:

<svg data-name="Layer 1" id="Layer_1" viewBox="0 0 536.04 691.72" xmlns="http://www.w3.org/2000/svg">
    <title>Test_2</title>
    <defs>
    <style type="text/css">@import url(https://fonts.googleapis.com/css?family=Tangerine);</style>
    </defs>
    <text style="font-size: 20.289770126342773px;fill: #231f20;font-family: Myriad Pro" transform="translate(73.31 120.47) rotate(-27.42) scale(0.83 1)">Hello
        <tspan x="44.11" y="0"/>
        <tspan x="47.68" y="0">W</tspan>
        <tspan x="64.18" y="0">o</tspan>
        <tspan x="75.31" y="0">r</tspan>
        <tspan x="82.03" y="0">ld!</tspan>
        <tspan style="font-family: Marker Felt">
            <tspan style="letter-spacing: -1.2033549767559024px" x="0" y="67.55">W</tspan>
            <tspan x="16.31" y="67.55">e</tspan>
            <tspan x="26.13" y="67.55">l</tspan>
            <tspan x="31.59" y="67.55">c</tspan>
            <tspan x="41.82" y="67.55">o</tspan>
            <tspan x="52.51" y="67.55">m</tspan>
            <tspan x="69.17" y="67.55">e </tspan>
            <tspan style="font-family: Myriad Pro" x="83.37" y="67.55">t</tspan>
            <tspan style="font-family: Myriad Pro" x="89.96" y="67.55">o the </tspan>
            <tspan style="font-size: 36px;font-family: Phosphate" x="137.85" y="67.55">Jungle </tspan>
            <tspan style="font-family: Myriad Pro" x="261.4" y="67.55">!!!</tspan></tspan>
    </text>
    <text style="font-size: 12px;fill: #ec297b;font-family: Myriad Pro" transform="translate(296.88 156.85)">W
        <tspan x="9.76" y="0">el</tspan>
        <tspan x="18.6" y="0">c</tspan>
        <tspan x="23.9" y="0">ome </tspan>
        <tspan style="fill: #009345" x="49.06" y="0">t</tspan>
        <tspan style="fill: #009345" x="52.96" y="0">o </tspan>
        <tspan style="fill: #f05a28" x="62.09" y="0">the </tspan>
        <tspan style="fill: #ec1c24" x="81.28" y="0">Jungle </tspan>
        <tspan style="fill: #231f20;font-size: 60px;font-family: Marker Felt;letter-spacing: 2px" x="117.08" y="0">!!</tspan>
        <tspan style="fill: #231f20;font-size: 60px;font-family: Marker Felt" x="149.36" y="0">!</tspan></text>
    <rect height="99.22" style="fill: #ec297b" width="109.38" y="253.72"/>
    <ellipse cx="270.31" cy="269.35" rx="91.19" ry="41.55" style="fill: #e6e7e8;stroke: #231f20;stroke-linecap: round;stroke-miterlimit: 10"/>
    <rect height="136.33" style="fill: #009345;stroke: #ee4036;stroke-linecap: round;stroke-miterlimit: 10" width="136.33" x="297.07" y="355.87"/>
    <polygon points="141.5 386.05 65.64 517.45 217.37 517.45 141.5 386.05" style="fill: #e6e7e8;stroke: #231f20;stroke-linecap: round;stroke-miterlimit: 10"/>
    <ellipse cx="257.42" cy="643.57" rx="119.14" ry="47.66" style="fill: #e6e7e8;stroke: #231f20;stroke-linecap: round;stroke-miterlimit: 10"/>
    <text style="font-size: 14px;fill: #231f20; font-family: 'Tangerine', serif;" transform="translate(58.59 532.63)">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</text>
</svg>

谢谢，
杰拉德

Answer 1

<style type="text/css"> @font-face{ font-family:"Myriad Pro"; src:url(<true type font or svg font url>}</style>

Batik 不支持 woff 字体渲染到图像。当您使用 woff 类型渲染时，它将采用默认字体。