java - 将包含外部 CSS 的 SVG 转换为图像 java

Question

我想将 SVG 文件转换为图像。问题是我的 SVG 使用外部 CSS 文件，当我使用 Apache Batik 时, 它无法识别外部 CSS 文件，它只显示内联 SVG 标签的样式。这是我的示例代码:

public static void svg2jpgBatik1() {
        JPEGTranscoder transcoder = new JPEGTranscoder();

        try {

            // Create a JPEG transcoder
            JPEGTranscoder t = new JPEGTranscoder();
            // Set the transcoding hints.
            t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY,
                    0.8f);

            // Create the transcoder input.
            String svgURI = new File("D:\\SVG_PATH\\map.svg").toURL().toString();
            TranscoderInput input = new TranscoderInput(svgURI);

            // Create the transcoder output.
            OutputStream ostream = new FileOutputStream("D:\\JPEG_PATH\\map.jpg");
            TranscoderOutput output = new TranscoderOutput(ostream);
            t.addTranscodingHint(JPEGTranscoder.KEY_ALTERNATE_STYLESHEET, "D:\\STYLESHEET_PATH\\style.css");
            t.addTranscodingHint(JPEGTranscoder.KEY_BACKGROUND_COLOR, Color.blue);

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

            // Flush and close the stream.
            ostream.flush();
            ostream.close();
        } catch (Exception e) {
            e.printStackTrace();
        } 
    }

这一行有效:

t.addTranscodingHint(JPEGTranscoder.KEY_BACKGROUND_COLOR, Color.blue);

虽然这条线不起作用:

 t.addTranscodingHint(JPEGTranscoder.KEY_ALTERNATE_STYLESHEET, "D:\\STYLESHEET_PATH\\style.css");

我在 SVG 中添加了这部分:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 10 1000" preserveAspectRatio="xMinYMin meet"> 
<defs>
    <link href="STYLESHEET_PATH\\style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>

  </defs>

当我在浏览器中打开它时应用了 SVG，但在 batik 中它不适用。

我也把样式放到了 SVG 的标签中，但是结果是一样的。

它唯一可以应用的样式是内联 SVG 样式，例如 fill="#FFFFFF":

<text text-anchor="middle" alignment-baseline="middle"  x="624" xml:space="preserve" y="123.0" 
       fill="#FFFFFF"  >Sample Text</text>

我想知道是否有人可以帮助我解决这个问题，或者让我知道在我将它转换为图像时从 External CSS 获得 SVG 样式的最佳替代方案。

提前致谢。

Answer 1

我在 SVG 代码的顶部添加了这一行:

<?xml-stylesheet type="text/css" href="style.css" ?>

代替SVG标签后的这部分:

<defs>
    <link href="style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>

  </defs>

现在它使用外部 CSS 文件的样式制作图像。

所以 SVG 文件将是:

<?xml-stylesheet type="text/css" href="style.css" ?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 10 1000" preserveAspectRatio="xMinYMin meet">