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字體渲染到image.it將使用woff類型渲染時采用默認字體。