javascript - d3生成的SVG没有通过canvg正确转换

Question

尝试通过canvg将d3生成的线散点图转换为画布时遇到问题。

我的图表最初看起来像这样：

图片链接

其中，当通过 svg.html().trim() 打印 svg 时，会打印以下 HTML：

<g class="x axis" transform="translate(0,340)" style="text-anchor: end; fill: none; stroke: #000000; shape-rendering: crispedges;"><g class="tick" transform="translate(37.56296020984349,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-7.6</text></g><g class="tick" transform="translate(94.17204801007445,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-7.4</text></g><g class="tick" transform="translate(150.7811358103057,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-7.2</text></g><g class="tick" transform="translate(207.3902236105369,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-7.0</text></g><g class="tick" transform="translate(263.99931141076814,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-6.8</text></g><g class="tick" transform="translate(320.6083992109994,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-6.6</text></g><g class="tick" transform="translate(377.2174870112303,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-6.4</text></g><g class="tick" transform="translate(433.82657481146157,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-6.2</text></g><g class="tick" transform="translate(490.43566261169275,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-6.0</text></g><g class="tick" transform="translate(547.044750411924,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-5.8</text></g><g class="tick" transform="translate(603.6538382121553,0)" style="opacity: 1;"><line y2="6" x2="0"></line><text y="9" x="0" dy=".71em" style="text-anchor: middle;">-5.6</text></g><path class="domain" d="M0,6V0H610V6"></path><text class="label" x="610" y="-6">ŷ</text></g><g class="y axis" style="text-anchor: end; fill: none; stroke: #000000; shape-rendering: crispedges;"><g class="tick" transform="translate(0,336.69332507598887)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-7.8</text></g><g class="tick" transform="translate(0,306.44012357543005)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-7.6</text></g><g class="tick" transform="translate(0,276.18692207487135)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-7.4</text></g><g class="tick" transform="translate(0,245.93372057431253)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-7.2</text></g><g class="tick" transform="translate(0,215.68051907375371)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-7.0</text></g><g class="tick" transform="translate(0,185.42731757319487)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-6.8</text></g><g class="tick" transform="translate(0,155.17411607263602)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-6.6</text></g><g class="tick" transform="translate(0,124.92091457207735)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-6.4</text></g><g class="tick" transform="translate(0,94.66771307151853)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-6.2</text></g><g class="tick" transform="translate(0,64.41451157095969)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-6.0</text></g><g class="tick" transform="translate(0,34.16131007040087)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-5.8</text></g><g class="tick" transform="translate(0,3.9081085698420566)" style="opacity: 1;"><line x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" style="text-anchor: end;">-5.6</text></g><path class="domain" d="M-6,0H0V340H-6"></path><text class="label" transform="rotate(-90)" y="6" dy=".71em">y</text></g><line x1="610" y1="0.5165734156219628" x2="0" y2="326.5146354311259" style="stroke: #000000; stroke-width: 2px; fill: #820283; shape-rendering: crispedges;"></line><circle class="dot" r="3.5" cx="361.84811967346764" cy="147.98898071625342" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="316.95711304788443" cy="155.02285006513333" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="332.0434349466461" cy="162.66178344402437" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="282.1142195068421" cy="178.78673984382223" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="324.5710353570153" cy="146.86961226073268" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="425.2786025536267" cy="93.65423082124977" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="422.2783209002144" cy="100.8091129761319" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="502.4933983131421" cy="60.844633793893706" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="497.5967122184219" cy="62.34216726817141" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="145.57309973268448" cy="255.69037805824271" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="50.41322314049593" cy="311.900826446281" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="443.25198793020024" cy="89.28264320441897" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="411.5508987620707" cy="104.59076316370181" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="425.61825708042807" cy="103.3957617044297" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="373.1133281457136" cy="178.52958763106756" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="465.0181821893889" cy="76.44015916743189" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="456.13055540475267" cy="85.36485361009662" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="378.3779733111351" cy="114.21128124087952" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="62.18791340294398" cy="297.77258134552" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="496.9457077087193" cy="61.47995102540551" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="476.1984770299346" cy="72.73414198361331" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="366.17871489018535" cy="124.6637623593225" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="397.79489042661436" cy="107.20766509350008" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="477.10422243473823" cy="77.89231283945867" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="417.2967211737941" cy="115.34577629715051" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="263.32000235716544" cy="192.02251550031679" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="320.12722196469724" cy="151.66474469857135" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="501.2196938376368" cy="59.69501213687249" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="255.53625278463343" cy="187.04586385347477" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="161.848212475251" cy="233.6357941643353" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="371.64149186290774" cy="122.25863284002807" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="459.86675519956805" cy="78.33098426121671" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="328.22232152013027" cy="143.51150689417068" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="120.72171018838308" cy="279.1063560196752" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="422.3915390758149" cy="102.27639324890907" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="189.92632002416556" cy="224.57496031491797" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="378.51949603063565" cy="126.73610666211084" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="377.50053245023156" cy="120.65521316049856" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="149.47912679090038" cy="296.7742256960016" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="324.8540807960166" cy="142.02910002064326" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="554.5454545454545" cy="30.90909090909082" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="282.5104831214436" cy="183.70288508766302" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="264.11252958636857" cy="165.021533161068" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="496.4362259185174" cy="62.87159829443118" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="401.8141356604308" cy="121.53255600401474" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="426.6655252047324" cy="93.04916679123863" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="521.0894836555179" cy="47.63911133889985" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="413.3057804838778" cy="106.70848726874095" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="527.3447878574434" cy="44.175119767085846" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="214.66449139286652" cy="208.3592443106185" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="542.4877188440055" cy="40.42372278101658" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="283.81249214084886" cy="168.56115773663342" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="269.7734383663916" cy="185.6088367821982" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="239.31774912986728" cy="176.00344530577087" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="505.63520268605487" cy="56.03437475530495" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="449.53559667602576" cy="79.22345370548322" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="385.0578456715624" cy="127.34117069212209" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="385.08615021546245" cy="151.67987129932158" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="524.0048516772298" cy="45.627273439112685" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="312.7963450945673" cy="151.6193648963205" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="295.077700613095" cy="168.1527395163759" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="251.14904848011568" cy="177.87914379880544" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="340.73292992398143" cy="149.6075269965333" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="528.92984231585" cy="44.34151237533899" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="357.1495653860484" cy="150.0613250190417" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="192.75677441417707" cy="232.53155230956492" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="93.01156171016991" cy="277.72983535139974" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="494.3699942138087" cy="62.25140766366968" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="433.9114884431619" cy="96.27113275104816" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="490.6904035067937" cy="64.20273916045574" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="313.90022230667176" cy="166.64007944134786" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="435.94941560397035" cy="93.10967319423975" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="429.1280205240425" cy="97.67790662082407" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="353.5548883107338" cy="140.9551113673735" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="481.944299441658" cy="69.23989721029886" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="447.8373240420188" cy="80.16130295200054" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="534.9304056226744" cy="38.54802428798189" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="204.41824650102464" cy="215.27210085349617" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="153.41345839301655" cy="304.3980324741424" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="477.3306587859394" cy="69.45166962080265" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="267.5373793982826" cy="176.3513571230273" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="509.17327067356933" cy="55.86798214705186" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="449.2525512370245" cy="85.924537837857" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="447.24292862011646" cy="90.05409984268334" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="113.53235603775364" cy="259.29050903680917" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="551.686695611543" cy="31.0149771143428" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="128.9866370072167" cy="284.5670588905261" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="371.6131873190074" cy="124.52762295257008" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="367.2259830144897" cy="131.4858592976985" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="488.992130872787" cy="65.08008200397205" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="412.85290778147595" cy="107.70684291825935" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="406.85234447465143" cy="117.26685459243592" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="371.7830145824082" cy="128.76307116264823" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="367.2825921022898" cy="121.63844220926671" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="320.6083992109994" cy="148.82094375751873" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="173.17003003529723" cy="215.72589887600458" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="63.26348607114837" cy="290.1185213658786" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="363.0652150611726" cy="132.84725336522368" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="387.09577283237076" cy="129.38326179340973" style="opacity: 0.75; fill: #900000;"></circle><circle class="dot" r="3.5" cx="443.76146972040215" cy="88.46580676390394" style="opacity: 0.75; fill: #900000;"></circle> 

正如你所看到的，我尽可能地尝试做内联样式。但是，当我使用 canvg 将其转换为画布时，它看起来像这样。

画布输出

出于某种原因，只有 x 轴是可见的并设置了样式。我用这段代码生成了第二张图片：

var canvas = document.getElementbyId('idofmycanvas');
canvg(canvas, svg.html().trim());

我在控制台中确实有一个错误，上面写着：

ERROR: Element 'parsererror' not yet implemented.

经过研究，很多人和我有类似的问题，但没有提供太多帮助。我发现的唯一信息是 canvg 很难翻译一些 SVG 元素并且干脆放弃了。我的最终目标是以某种方式将我的 d3 生成的 SVG 保存到客户端的计算机中。

另外，如果有帮助，我只担心 Chrome。非常感谢您的参与...