canvg drawSvg() 无法正确定位 svg

Question

我有这个 svg

<div style="width: 84px; height: 78px; position: absolute; margin: 0px auto; left: 88px; top: 67px;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" style="position: relative; left: 0px; top: 0px; width: 100%; height: 100%; enable-background:new 0 0 138 138;">
                  <defs>
                     <filter id="blurFilter1" y="-10" height="40" x="-10" width="150">
                      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
                      <feGaussianBlur in="offset2" stdDeviation="3" result="blur2"></feGaussianBlur>
                      <feMerge>
                        <feMergeNode in="blur2"></feMergeNode>
                        <feMergeNode in="SourceGraphic"></feMergeNode>
                      </feMerge>
                    </filter>
                  </defs>
                  <g filter="url(#blurFilter1)">
                    <rect class="rrfNode" x="0" y="0" width="130" height="130" fill="rgb(235,129,48)" rx="15" ry="15" stroke="black" stroke-width="0.5"></rect>
                    <text style="font-size:25px; font-family: 'Lora', serif;" x="50%" y="50%" stroke="none" text-anchor="middle" fill="white" dy=".3em">C-Corp1</text>

                    <rect x="12" y="15" width="110" height="30" rx="15" ry="15" stroke-width="0.5" stroke-opacity="0" fill="rgb(255,255,0)" fill-opacity="0.8" visibility="visible"></rect>

                    <text style="font-size:25px; font-family: 'Lora', serif;" y="25%" x="50%" stroke="none" text-anchor="middle" fill="red" dy=".3em" visibility="visible">New</text>                                           
                  </g>
    </svg>
</div>

我想在画布上的同一位置绘制这个 svg

<canvas id="myCanvas1" width="935" height="768"></canvas>

我正在使用 canvg 库

我在

上为此创建了一个小提琴

https://jsfiddle.net/jnwmudwc/1/. 

这清楚地表明源 svg 在画布上绘制时应该达到相同的位置，但事实并非如此。

即使在 drawingContext.drawSvg() 方法中使用的坐标与源 svg 相同，它也被绘制在错误的位置。

我尝试了很多策略，但都没有奏效。请提出一个可行的解决方案来解决这个问题。

Answer 1

好吧，在经历了很多痛苦之后，我有一个解决方案。我想分享这个，这样其他人就不必像我一样面临同样的麻烦。

用drawingContext.drawImage() 替换drawingContext.drawSvg() 解决了这个问题。

        var nd = $("#node1").find("svg")[0].outerHTML;

        var img = new Image();
        img.src = "data:image/svg+xml;base64,"+btoa(nd);

        img.onload = function(){
            WPBContext.drawImage(img, x, y , w, h);
        }

如您所见，我将 div 中包含的 svg 转换为 base64 编码字符串，然后调用 drawImage() 函数。

我想说，虽然这解决了我的问题，但是当 svg 不是几何形状或 svg 具有多种颜色时，这些 svg 在画布上以黑色呈现。

我也在努力寻找解决方案，同时我希望你们中的一些人能指出问题所在。

我无法更新 jsfiddle 以反映更改，但其他人可以随时进行必要的更改，以便帮助其他人。