2017-08-31 16 views
0

SVGファイルを画像に変換したい。問題は私のSVGが外部CSSファイルを使用していて、Apache Batikを使用すると、外部CSSファイルを認識できず、SVGタグのインラインスタイルだけを表示することになります。ここに私のサンプルコードは次のとおりです。

SVGに外部CSSを含む画像を変換する

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を開いたときにSVGを適用しましたが、バティックでは適用されません。

また、スタイルをSVGのタグに入れましたが、結果は同じでした。

それが適用できる唯一のスタイルは、このような塗りつぶし=「#1 FFFFFF」としてインラインSVGのスタイルである:誰もがこの問題を解決するか、私はいずれかを知っているように私を助けることができれば、私は思っていた

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

SVGスタイルを使用するための最良の代替手段外部CSS私はそれを画像に変換します。

ありがとうございます。

+0

おかげ@RobertLongsonを。私は解決策を見つけました。 – farzad

答えて

0

私は私のSVGコードの先頭に次の行を追加しました:

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

    </defs> 

、今ではのスタイルで画像を作る:SVGタグの後

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

の代わりに、この部分を外部の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"> 
関連する問題