SVG从DOM中保存下来后中断

Question

我需要导出一些SVG图像从一个网页到PDF文件。使用SVG创建PDF应该可以使用tcpdf (示例58)。

但是首先，我需要将SVG从DOM中保存到一个文件中。我想我可以简单地复制svg-元素并将其保存在一个文件中(如描述的这里)。但是这样做给了我一个错误的SVG图像。

下面是我想导出的SVG的一个例子：

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* <svg xmlns="http://www.w3.org/2000/svg" class="v-m-root" style="left: 0px; top: 0px; direction: ltr; cursor: default; position: absolute; box-sizing: border-box;" width="500" height="300"><rect class="v-eventLayer" x="0" y="0" fill-opacity="0" width="500" height="300"/><g class="v-backgroundutil"><rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-e92e79a7-f53d-47ba-af43-d16a95242caf" x="0" y="0" width="500" height="300" style="fill:transparent"/></g><defs/><g class="v-m-title" transform="translate(0, 0)"/><g class="v-m-legends" transform="translate(363, 24)"><g class="v-m-legend" transform="translate(0,0)"><rect class="v-bound" width="113" height="180" fill="transparent"/><g class="v-content" transform="translate(0,0)"><g class="v-groups v-label viz-legend-valueLabel" transform="translate(0,0)" font-family="'Open Sans', Arial, Helvetica, sans-serif" font-size="12px" font-weight="normal" fill="#000000"><g class="v-legend-content"><rect class="v-indicatedRect v-legend-item v-hovershadow" visibility="hidden" width="123" x="-5" y="-3" height="18"/><g class="v-row ID_0" transform="translate(0,0)"><path class="" fill="#748cb2" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Frau A...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Frau Anna-Marie Maier</title></rect></g><g class="v-row ID_1" transform="translate(0,18)"><path class="" fill="#9cc677" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Frau S...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Frau Sara Gut-Ski</title></rect></g><g class="v-row ID_2" transform="translate(0,36)"><path class="" fill="#eacf5e" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Frau Si...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Frau Simone Meier-Eisenhut</title></rect></g><g class="v-row ID_3" transform="translate(0,54)"><path class="" fill="#f9ad79" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Herr K...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Herr Kurt Nauser</title></rect></g><g class="v-row ID_4" transform="translate(0,72)"><path class="" fill="#d16a7c" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Herr P...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Herr Paolo Meyer</title></rect></g><g class="v-row ID_5" transform="translate(0,90)"><path class="" fill="#8873a2" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Frau A...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Frau Anna-Marie Maier</title></rect></g><g class="v-row ID_6" transform="translate(0,108)"><path class="" fill="#3a95b3" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Frau S...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Frau Sara Gut-Ski</title></rect></g><g class="v-row ID_7" transform="translate(0,126)"><path class="" fill="#b6d949" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Frau Si...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Frau Simone Meier-Eisenhut</title></rect></g><g class="v-row ID_8" transform="translate(0,144)"><path class="" fill="#fdd36c" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Herr K...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Herr Kurt Nauser</title></rect></g><g class="v-row ID_9" transform="translate(0,162)"><path class="" fill="#f47958" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Herr P...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Herr Paolo Meyer</title></rect></g></g></g></g></g></g><g class="v-m-main" transform="translate(24, 24)"><rect class="v-bound" width="331" height="252" visibility="hidden"/><g class="v-m-background" transform="translate(38.5,7.199999999999999)"><rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-a88b180e-ce0a-4022-bd76-a51f2af9838d" x="0" y="0" width="292.5" height="208.4" style="fill:transparent"/><line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/><line class="v-background-border viz-plot-background-border" x1="292.5" y1="0" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/><line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="292.5" y2="0" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/><line class="v-background-border viz-plot-background-border" x1="0" y1="208.4" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/></g><g class="v-m-xAxis" transform="translate(38.5,215.6)"><rect class="v-bound" width="293.5" height="36.4" fill="transparent"/><g class="viz-axis v-axis"><g class="viz-axis-body v-body"><path class="v-categoryaxisline" d="M0 5L0 0L292.5 0L292.5 5" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><rect x="0" y="1" width="292.5" height="35.4" opacity="0" class="v-labelarea v-axis-item"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text pointer-events="none" x="146.25" y="18.2" dominant-baseline="middle" text-anchor="middle">ZAHL</text></g></g></g></g><g class="v-m-yAxis" transform="translate(0,7.199999999999999)"><rect class="v-bound" width="38.5" height="209.4" fill="transparent"/><g class="viz-axis v-axis"><g class="viz-axis-body v-body"><line class="v-valueaxisline" x1="33" x2="38" y1="0" y2="0" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="0" dominant-baseline="middle" text-anchor="end">400</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="52.1" y2="52.1" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><line class="v-gridline" y1="52.1" y2="52.1" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="52.1" dominant-baseline="middle" text-anchor="end">300</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="104.2" y2="104.2" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><line class="v-gridline" y1="104.2" y2="104.2" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="104.2" dominant-baseline="middle" text-anchor="end">200</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="156.3" y2="156.3" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><line class="v-gridline" y1="156.3" y2="156.3" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="156.3" dominant-baseline="middle" text-anchor="end">100</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="208.4" y2="208.4" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="208.4" dominant-baseline="middle" text-anchor="end">0</text></g><path class="v-valueaxisline" d="M38 208.4L38 208.4L38 0L38 0" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/></g></g></g><g class="v-m-plot" transform="translate(38.5,7.199999999999999)"><rect class="v-bound" width="292.5" height="208.4" fill="transparent"/><defs><clipPath id="clipPlot_1877"><rect width="292.5" height="208.4"/></clipPath></defs><defs/><g class="v-datashapesgroup" fill="none" clip-path="url(#clipPlot_1877)"><g class="v-column"><g class="v-datashape" transform="translate(12.061855670103093,83.36000000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#748cb2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="125.03999999999999" y="0" x="0"/></g><g class="v-datashape" transform="translate(39.20103092783505,101.59500000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#9cc677" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="106.80499999999999" y="0" x="0"/></g><g class="v-datashape" transform="translate(66.34020618556701,205.274)"><rect class="v-datapoint v-morphable-datapoint" fill="#eacf5e" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="3.1260000000000048" y="0" x="0"/></g><g class="v-datashape" transform="translate(93.47938144329896,34.907)"><rect class="v-datapoint v-morphable-datapoint" fill="#f9ad79" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="173.493" y="0" x="0"/></g><g class="v-datashape" transform="translate(120.61855670103091,44.806)"><rect class="v-datapoint v-morphable-datapoint" fill="#d16a7c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="163.594" y="0" x="0"/></g><g class="v-datashape" transform="translate(147.7577319587629,104.72099999999999)"><rect class="v-datapoint v-morphable-datapoint" fill="#8873a2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="103.67900000000002" y="0" x="0"/></g><g class="v-datashape" transform="translate(174.89690721649484,81.27600000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#3a95b3" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="127.124" y="0" x="0"/></g><g class="v-datashape" transform="translate(202.03608247422682,196.938)"><rect class="v-datapoint v-morphable-datapoint" fill="#b6d949" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="11.462000000000018" y="0" x="0"/></g><g class="v-datashape" transform="translate(229.17525773195874,74.50300000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#fdd36c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="133.897" y="0" x="0"/></g><g class="v-datashape" transform="translate(256.3144329896907,61.999)"><rect class="v-datapoint v-morphable-datapoint" fill="#f47958" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="146.401" y="0" x="0"/></g></g></g></g></g></svg>
*/

​

下面是用tcpdf生成的pdf中的图像：

​

这是它在inkscape中的形象：

​

有什么想法吗?这里有什么问题吗?或者有一些更好的方法来实现这一点？

Answer 1

关于这个SVG，有三件事看起来Inkscape似乎不喜欢：

1. fill="transparent" 有一些矩形具有这个填充。Inkscape似乎不支持这个新的CSS3颜色值。Inkscape正在将它们视为fill="black"。Fix:用fill="none"替换它们
2. visibility="hidden" 有些元素是隐藏的。Inkscape似乎也不喜欢这个。修正:移除它们。
3. fill="rgba(...)" Inkscape似乎也不了解RGBA的颜色。rgba()也是CSS3中的一个新特性。Fix:用fill="rgb(...)" (或fill="#rrggbb")和fill-opacity="..."替换它们。例如：fill="rgba(255, 255, 255, 0)"变成fill="rgb(255, 255, 255)" fill-opacity="0"。

下面是在Inkscape中正确显示的SVG的修改版本。我正在使用0.91 (当前稳定版本)。新版本的Inkscape出现后，很可能会解决这些问题。

我希望这些问题中的一部分或全部也会影响TCPDF。尝试文件的“固定”版本，看看它是否工作得更好。

我不知道你用的是什么绘图包。为其他图形纠正这些问题可能涉及修改图形代码，或者要求它的作者修复它，使其暂时不使用CSS3特性。

​

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" class="v-m-root" style="left: 0px; top: 0px; direction: ltr; cursor: default; position: absolute; box-sizing: border-box;" width="500" height="300">
<rect class="v-eventLayer" x="0" y="0" fill-opacity="0" width="500" height="300"/>
<g class="v-backgroundutil">
    <rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-e92e79a7-f53d-47ba-af43-d16a95242caf" x="0" y="0" width="500" height="300" style="fill:none"/>
</g>
<defs/>
<g class="v-m-title" transform="translate(0, 0)"/>
<g class="v-m-legends" transform="translate(363, 24)">
    <g class="v-m-legend" transform="translate(0,0)">
        <rect class="v-bound" width="113" height="180" fill="none"/>
        <g class="v-content" transform="translate(0,0)">
            <g class="v-groups v-label viz-legend-valueLabel" transform="translate(0,0)" font-family="'Open Sans', Arial, Helvetica, sans-serif" font-size="12px" font-weight="normal" fill="#000000">
                <g class="v-legend-content">
                    <g class="v-row ID_0" transform="translate(0,0)">
                        <path class="" fill="#748cb2" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Frau A...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Frau Anna-Marie Maier</title>
                        </rect>
                    </g>
                    <g class="v-row ID_1" transform="translate(0,18)">
                        <path class="" fill="#9cc677" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Frau S...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Frau Sara Gut-Ski</title>
                        </rect>
                    </g>
                    <g class="v-row ID_2" transform="translate(0,36)">
                        <path class="" fill="#eacf5e" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Frau Si...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Frau Simone Meier-Eisenhut</title>
                        </rect>
                    </g>
                    <g class="v-row ID_3" transform="translate(0,54)">
                        <path class="" fill="#f9ad79" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Herr K...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Herr Kurt Nauser</title>
                        </rect>
                    </g>
                    <g class="v-row ID_4" transform="translate(0,72)">
                        <path class="" fill="#d16a7c" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Herr P...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Herr Paolo Meyer</title>
                        </rect>
                    </g>
                    <g class="v-row ID_5" transform="translate(0,90)">
                        <path class="" fill="#8873a2" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Frau A...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Frau Anna-Marie Maier</title>
                        </rect>
                    </g>
                    <g class="v-row ID_6" transform="translate(0,108)">
                        <path class="" fill="#3a95b3" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Frau S...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Frau Sara Gut-Ski</title>
                        </rect>
                    </g>
                    <g class="v-row ID_7" transform="translate(0,126)">
                        <path class="" fill="#b6d949" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Frau Si...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Frau Simone Meier-Eisenhut</title>
                        </rect>
                    </g>
                    <g class="v-row ID_8" transform="translate(0,144)">
                        <path class="" fill="#fdd36c" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Herr K...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Herr Kurt Nauser</title>
                        </rect>
                    </g>
                    <g class="v-row ID_9" transform="translate(0,162)">
                        <path class="" fill="#f47958" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Herr P...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Herr Paolo Meyer</title>
                        </rect>
                    </g>
                </g>
            </g>
        </g>
    </g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
    <g class="v-m-background" transform="translate(38.5,7.199999999999999)">
        <rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-a88b180e-ce0a-4022-bd76-a51f2af9838d" x="0" y="0" width="292.5" height="208.4" style="fill:none"/>
        <line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
        <line class="v-background-border viz-plot-background-border" x1="292.5" y1="0" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
        <line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="292.5" y2="0" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
        <line class="v-background-border viz-plot-background-border" x1="0" y1="208.4" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
    </g>
    <g class="v-m-xAxis" transform="translate(38.5,215.6)">
        <rect class="v-bound" width="293.5" height="36.4" fill="none"/>
        <g class="viz-axis v-axis">
            <g class="viz-axis-body v-body">
                <path class="v-categoryaxisline" d="M0 5L0 0L292.5 0L292.5 5" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <rect x="0" y="1" width="292.5" height="35.4" opacity="0" class="v-labelarea v-axis-item"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text pointer-events="none" x="146.25" y="18.2" dominant-baseline="middle" text-anchor="middle">ZAHL</text>
                </g>
            </g>
        </g>
    </g>
    <g class="v-m-yAxis" transform="translate(0,7.199999999999999)">
        <rect class="v-bound" width="38.5" height="209.4" fill="none"/>
        <g class="viz-axis v-axis">
            <g class="viz-axis-body v-body">
                <line class="v-valueaxisline" x1="33" x2="38" y1="0" y2="0" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="0" dominant-baseline="middle" text-anchor="end">400</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="52.1" y2="52.1" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <line class="v-gridline" y1="52.1" y2="52.1" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="52.1" dominant-baseline="middle" text-anchor="end">300</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="104.2" y2="104.2" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <line class="v-gridline" y1="104.2" y2="104.2" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="104.2" dominant-baseline="middle" text-anchor="end">200</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="156.3" y2="156.3" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <line class="v-gridline" y1="156.3" y2="156.3" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="156.3" dominant-baseline="middle" text-anchor="end">100</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="208.4" y2="208.4" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="208.4" dominant-baseline="middle" text-anchor="end">0</text>
                </g>
                <path class="v-valueaxisline" d="M38 208.4L38 208.4L38 0L38 0" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
            </g>
        </g>
    </g>
    <g class="v-m-plot" transform="translate(38.5,7.199999999999999)">
        <rect class="v-bound" width="292.5" height="208.4" fill="none"/>
        <defs>
            <clipPath id="clipPlot_1877">
                <rect width="292.5" height="208.4"/>
            </clipPath>
        </defs>
        <defs/>
        <g class="v-datashapesgroup" fill="none" clip-path="url(#clipPlot_1877)">
            <g class="v-column">
                <g class="v-datashape" transform="translate(12.061855670103093,83.36000000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#748cb2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="125.03999999999999" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(39.20103092783505,101.59500000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#9cc677" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="106.80499999999999" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(66.34020618556701,205.274)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#eacf5e" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="3.1260000000000048" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(93.47938144329896,34.907)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#f9ad79" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="173.493" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(120.61855670103091,44.806)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#d16a7c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="163.594" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(147.7577319587629,104.72099999999999)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#8873a2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="103.67900000000002" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(174.89690721649484,81.27600000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#3a95b3" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="127.124" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(202.03608247422682,196.938)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#b6d949" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="11.462000000000018" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(229.17525773195874,74.50300000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#fdd36c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="133.897" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(256.3144329896907,61.999)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#f47958" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="146.401" y="0" x="0"/>
                </g>
            </g>
        </g>
    </g>
</g>
</svg>

​