使用蠟染將SVG DOM結構另存為SVG文件

Question

我使用Java中的蠟染動態創建和修改SVG DOM結構。 我可以在JSVGCanvas上顯示創建的結構。 完成該過程后，我想導出此DOM結構並將其另存為SVG文件。

要創建DOM，我使用了以下方法：

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
SVGDocument doc = (SVGDocument) impl.createDocument(svgNS, "svg", null);
Element svgRoot = doc.getDocumentElement();
svgRoot.setAttributeNS(null, "width", "300");
svgRoot.setAttributeNS(null, "height", "300");

我可以向該文檔中添加內容，並使用以下代碼將其顯示在JSVGCanvas ：

Element rect = doc.createElementNS(signs, "rect");
rect.setAttributeNS(null, "x", "20");
rect.setAttributeNS(null, "y", "50");
rect.setAttributeNS(null, "width", "140");
rect.setAttributeNS(null, "height", "210");
rect.setAttributeNS(svgNS, "fill", "grey");
rect.setAttributeNS(svgNS, "stroke", "black");
svgRoot.appendChild(rect);

JSVGCanvas canvas = new JSVGCanvas();
canvas.setDocumentState(ALWAYS_DYNAMIC);
canvas.setDocument(doc);

該代碼在JSVGCanvas上顯示文檔。

我的最后一步是嘗試將文檔另存為SVG文件。 我使用SVGGraphics2D在線閱讀了許多線程並在那里繪圖。 然后可以使用Writer導出文件。

SVGGraphics2D graphics = new SVGGraphics2D(doc);


// Finally, stream out SVG to the standard output using UTF-8
// character to byte encoding
boolean useCSS = true; // we want to use CSS style attribute
Writer out;
try {
    out = new OutputStreamWriter(new FileOutputStream(path), "UTF-8");
graphics.stream(out, useCSS);
out.flush();
out.close();
} catch (UnsupportedEncodingException | FileNotFoundException e) {
    e.printStackTrace();
} catch (SVGGraphics2DIOException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

寫入的文件缺少我修改后的DOM結構，看起來像以下代碼：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>

<svg style="stroke-dasharray:none; shape-rendering:auto; font-family:'Dialog'; text-rendering:auto; fill-opacity:1; color-interpolation:auto; color-rendering:auto; font-size:12px; fill:black; stroke:black; image-rendering:auto; stroke-miterlimit:10; stroke-linecap:square; stroke-linejoin:miter; font-style:normal; stroke-width:1; stroke-dashoffset:0; font-weight:normal; stroke-opacity:1;"
xmlns="http://www.w3.org/2000/svg" 
contentScriptType="text/ecmascript" preserveAspectRatio="xMidYMid meet" 
xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" version="1.0" contentStyleType="text/css">
<!--Generated by the Batik Graphics2D SVG Generator-->
<defs id="genericDefs"/><g/></svg>

有什么方法可以使SVGGraphics2D使用修改后的svgRoot或doc 。 或者還有另一種方法來保存JSVGCanvas上顯示的文檔。

Answer 1

您可以嘗試將文檔另存為純xml，因為svg基本上是xml。

// you will need these imports.
import javax.xml.transform.Result;
import javax.xml.transform.Source;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.TransformerFactoryConfigurationError;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;

// these 4 lines take your document doc and save it as output.svg
Transformer transformer = TransformerFactory.newInstance().newTransformer();
Result output = new StreamResult(new File("C:\\output.svg"));
Source input = new DOMSource(doc);
transformer.transform(input, output);

您有可能會遇到奇怪的錯誤： java.lang.NoClassDefFoundError: org/apache/xml/serializer/TreeWalker解決方案是在嘗試創建Transformer實例之前設置系統屬性，如下所示

System.setProperty("javax.xml.transform.TransformerFactory", "com.sun.org.apache.xalan.internal.xsltc.trax.TransformerFactoryImpl");

Answer 2

根據這個來源而不是

try {
    out = new OutputStreamWriter(new FileOutputStream(path), "UTF-8");
    graphics.stream(out, useCSS);
}

嘗試導出整個文檔：

try (Writer out = new OutputStreamWriter(new FileOutputStream(path), "UTF-8")) {
    graphics.stream(doc.getDocumentElement(), out, useCSS, false);
}

確保您的矩形（ 元素rect ）已添加到svg根文檔（ SVGDocument doc ）中