转换 SVG 时 Batik 出错：需要元素 <use> 的属性 "xlink:href"

Question

我有一个 SVG 文件，结构如下：

<svg xmlns="http://www.w3.org/2000/svg" width="506px" height="261px" viewBox="0 0 506 261" style="overflow: hidden; display: block; width: 506px; height: 261px;">
   <defs>
      <path fill="none" stroke="rgb(211,211,211)" d="M 5,-5 L 0,0 L 5,5" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" id="ygc10_0" />
      <path fill="none" stroke="rgb(211,211,211)" d="M 5,-5 L 0,0 L 5,5" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" id="ygc10_1" />
      <path fill="none" stroke="rgb(211,211,211)" d="M 5,-5 L 0,0 L 5,5" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" id="ygc10_2" />
      <path fill="none" stroke="rgb(211,211,211)" d="M 5,-5 L 0,0 L 5,5" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" id="ygc10_3" />
      <path fill="none" stroke="rgb(211,211,211)" d="M 5,-5 L 0,0 L 5,5" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" id="ygc10_4" />
   </defs>
   <g style="pointer-events:visiblePainted" transform="translate(-57.822952932363535 -41.05614567526554)" image-rendering="auto" shape-rendering="auto">
      <g>
         <path fill="none" stroke="rgb(211,211,211)" d="M 257.9119715596548,73.05614567526554 L 257.9119715596548,135.06828972638465" stroke-opacity="1" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" />
         <use href="#ygc10_0" transform="matrix(0 -2 2 0 257.912 135.068)" style="pointer-events: none;" />
      </g>
      <g>
         <path fill="none" stroke="rgb(211,211,211)" d="M 107.82295293236353,207.4377203121161 L 107.82295293236353,261.03014731718906" stroke-opacity="1" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" />
         <use href="#ygc10_1" transform="matrix(0 -2 2 0 107.823 261.03)" style="pointer-events: none;" />
      </g>
...

我正在尝试从其 ByteArrayInputStream 生成 PNG，就像这样（请暂时不要考虑缺少异常处理）：

static ByteArrayOutputStream svgToPng(ByteArrayInputStream streamBytes) throws TranscoderException, IOException {
    PNGTranscoder t = new PNGTranscoder();

    TranscoderInput input = new TranscoderInput(streamBytes);
    ByteArrayOutputStream ostream = new ByteArrayOutputStream();
    TranscoderOutput output = new TranscoderOutput(ostream);

    t.transcode(input, output);

    ostream.flush();
    return ostream;
}

但是，我在 transcode() 的调用中得到异常：

org.apache.batik.bridge.BridgeException: null:-1
The attribute "xlink:href" of the element <use> is required
    at org.apache.batik.bridge.SVGUseElementBridge.buildCompositeGraphicsNode(Unknown Source)
    at org.apache.batik.bridge.SVGUseElementBridge.createGraphicsNode(Unknown Source)
    at org.apache.batik.bridge.GVTBuilder.buildGraphicsNode(Unknown Source)
    at org.apache.batik.bridge.GVTBuilder.buildComposite(Unknown Source)
    at org.apache.batik.bridge.GVTBuilder.buildGraphicsNode(Unknown Source)
    at org.apache.batik.bridge.GVTBuilder.buildComposite(Unknown Source)
...

你能帮帮我吗？我也尝试，在我的 PNGTranscoder 声明之后：

t.addTranscodingHint(SVGAbstractTranscoder.KEY_DOCUMENT_ELEMENT_NAMESPACE_URI,
                SVGDOMImplementation.SVG_NAMESPACE_URI);

但是没有效果。谢谢大家。

Answer 1

您的 SVG 文件无效，一种修复方法是在根 SVG 元素上添加 xmlns:xlink 属性，如下所示...

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="506px" height="261px" viewBox="0 0 506 261">

正如 Paul 指出的那样，您还需要将 href 属性更改为 xlink:href，因为 href 是 SVG 2 而 Batik 尚不支持。

Answer 2

信息：在我的例子中，生成的 SVG 字符串没有宽度值。所以它抛出异常。

<g transform="translate(�, 85.00)  scale(�)">

应该是

<g transform="translate(168.88, 85.00)  scale(0.36)">

转换 SVG 时 Batik 出错：需要元素 <use> 的属性 "xlink:href"

Error with Batik, when converting a SVG: The attribute "xlink:href" of the element <use> is required

java

svg

batik