Question

我正在尝试将SVG转换为PNG文件。我的主要问题不是转换本身（我可以用很少的代码行完成），而是我想要发送到要渲染的“窗口”的SVG元素的中心。

我使用SVG引擎（https://github.com/vvvv/SVG），我的想法是获取我想要渲染的元素，然后在原点重新定位它，然后将svg文档的宽度和高度设置为宽度/高度。元件。这是代码：

var svgDocument = SvgDocument.Open(filename);
var el =(SvgVisualElement) svgDocument.GetElementById("MyId");

// set in the origin
el.Transforms.Add(new SvgTranslate(-el.Bounds.X, -el.Bounds.Y));

// set doc dimensions
svgDocument.Width = el.Bounds.Width;
svgDocument.Height = el.Bounds.Height;

bitmap.Save("PNGFile", ImageFormat.Png);

不幸的是，这种方式不起作用。这是一个不起作用的svg的例子（它是lenthy，所以我剪切了相关部分）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="70.125473"
   height="190.98564"
   id="svg6678"
   version="1.1">
   <g id="MyId">
    <g
       transform="translate(-2375.7448,475.88408)"
       id="Texture:door_single_rocks_gear">
      <path
         id="path9179-8-2-8-71-4-2-7"
         d="..." style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#5b3636;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.53245842;marker:none;enable-background:accumulate" />
      <path
         id="path9179-8-2-8-71-4-6"
         d="..." style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#815656;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.53245842;marker:none;enable-background:accumulate" />
      <path
         id="path4080-5-2"
         d="..."
         style="fill:#866262;fill-opacity:1;stroke:none" />
      <path
         id="path7662-1-1-4-9"
         d="..."
         style="fill:#5b3636;fill-opacity:1;stroke:none" />
      <path
         id="path7662-1-1-4-5-5"
         d="..."
         style="fill:#5b3636;fill-opacity:1;stroke:none" />
    </g>
    <g
       id="Texture:door_single_rocks"
       inkscape:label="#g5299"
       inkscape:export-filename="C:\Users\stefano.liboni\Dropbox\AndroidStudio\AsteroidRage\scenes_source\door_single_rocks.png"
       inkscape:export-xdpi="199.88191"
       inkscape:export-ydpi="199.88191">
      <path style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#5b3636;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
         d="..."
         id="rect4972-3-8-9" />
      <path
         id="rect4972-9"
         d="..." style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#815656;fill-opacity:1;fill-rule:nonzero;stroke:#5b3636;stroke-width:1.0026859;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate" />
      <path
         style="fill:#5b3636;fill-opacity:1;stroke:none"
         d="..."
         id="path7662-1-1-4-5-5-0" />
      <path
         style="fill:#5b3636;fill-opacity:1;stroke:none"
         d="..."
         id="path7662-1-1-4-5-5-03-9" />
      <path
         style="fill:#5b3636;fill-opacity:1;stroke:none"
         d="..."
         id="path7662-1-1-4-5-5-03" />
    </g>
    <g
       id="AnimatedTexture:door_single_rocks_led"
       inkscape:label="#g5295">
      <path
         id="path9095-7"
         d="..."
         style="fill:#9486ff;fill-opacity:1;stroke:#000000;stroke-width:1.07693017;stroke-opacity:1" />
      <path
         id="path9095-7-5-1"
         d="..."
         style="fill:#9486ff;fill-opacity:1;stroke:#000000;stroke-width:1.07693017;stroke-opacity:1" />
    </g>
  </g>
</svg>

正如您所看到的那样， g 元素 MyId 充满了其他g元素和一些路径。我添加了在inkscape 中呈现的图像。

一旦我在代码中得到了元素的边界（左下角的那个），我得到： {X = -1502.69763 Y = 668.7914宽度= 2514.11938高度= 870.0564}

这似乎是错误的，因为元素只有141px的宽度和395px的高度...... 如果我在该文件上运行代码，则输出为：

因此PNG有很多未使用的空间，png的y，宽度和高度都是错误的。正确的是：

svgDocument.X = 0;
svgDocument.Y = -476;
svgDocument.Width = 141;
svgDocument.Height = 395;

知道我做错了什么？

注意：我知道inkscape会做得对（我曾经使用它），但是有一个bug，因为至少3年他们都懒得解决这个问题，如果你指定“动词”，就会阻止inkscape以静默模式运行“在命令行中。因此，这是一个痛苦，因为对于每个文件，它打开UI并花费3-4秒来做...

Answer 1

我还没有找到该库的文档。我在源头看了一下，但主要是我能解释的是SVG部分内容。也许引擎提供了更简单的方法。

根svg元素上的

transform属性是合法的，但是在你想要完成的上下文中，它们比helpl更令人困惑，因为还有其他属性导致转换，但是写在不同的形式。

<svg>元素提供的属性与您想要更直接地完成的内容相匹配：

最外层svg元素上的x和y属性将被忽略。
width和height描述了图片呈现的输出尺寸。所以他们应该反映最终的“窗口”维度。如果SVG最初的尺寸不适合您的“窗口”，请更改它们。
viewBox描述了应该呈现内部 SVG视口的哪一部分（根元素的坐标系）。不所选元素的SVGVisualElement.Bounds结构返回的内容。（相对于元素本身的坐标系的值，但不包括所有父元素转换）我在库中找不到任何能够获得所需值的函数。
preserveAspectRatio描述了渲染部分如何适合输出窗口。例如，XMidYMid meet（默认值）意味着：使用最大大小调整viewBox区域的大小，使其恰好适合宽度/高度而不会在任何方向溢出，并将其放置在中心。

虽然我不知道如何从库中获取所需的边界框值，但其他程序可以毫无问题地提供它们：

inkscape -I MyID在命令行中
在浏览器中通过Javascript document.getElementById("MyId").getBBox()

Answer 2

在ccprog的评论推动下我发现UI是由inkscape打开的，因为我在我运行的同一个命令中也做了其他的事情。

实际上将inkscape运行为：

MyFile.svg --export-id = ElementIdToRender --export-id-only --export-dpi = 200 --export-png =“TargetFile”

这份工作。

仍然要理解为什么SVG库给出了包含一个或多个具有变换属性集的子元素的 g 元素的奇数作为Bounds，但是现在我可以继续。 TNX

使用C＃将SVG元素添加到PNG文件

2 个答案: