Question

我需要将一些SVG图像从网页导出到PDF文件。使用tcpdf（例58）可以使用SVG创建PDF。

但首先，我需要将DOM中的SVG保存在文件中。我以为我可以简单地复制svg-element并将其保存在文件中（如here所述）。但这样做会给我一个错误的SVG图像。

以下是我要导出的SVG示例：

＆＃13;

<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>

＆＃13;

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

这是图片在inkscape中的外观：

任何想法在这里有什么问题或者更好的方法来实现这个目标？

Answer 1

这个SVG有三件事情，Inkscape似乎并不喜欢：

fill="transparent"

有一些矩形有这种填充。 Inkscape似乎不支持这个新的CSS3颜色值。 Inkscape将它们视为fill="black"。修复：将其替换为fill="none"
visibility="hidden"

有一些隐藏的元素。 Inkscape似乎也不喜欢这样。修复：删除它们。
fill="rgba(...)"

Inkscape似乎也不了解RGBA颜色。 rgba()也是CSS3中的新功能。修复：将其替换为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>

从DOM中保存SVG后SVG中断了

1 个答案: