将SVG导出到PNG截断的画布[重复]

Question

我想转换屏幕上的 SVG 并在按下按钮时将其下载为 png 文件。我发现了一篇文章 (Save inline SVG as JPEG/PNG/SVG)，除了一些奇怪的原因外，它会在我拥有的 SVG 为 800 x 300 时将输出截断为 300 x 150。

您能帮我将画布大小设置为我的 SVG 的大小，以便可以在不截断的情况下导出它吗？

我将原始链接插入到我在原始帖子中使用的 http://jsfiddle.net/LznLjxq7/ 的 jfiddle。

在 HTML 部分，我用我的 svg 替换了 svg，如下所示：

<svg id="mysvg" width="800" height="300"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
   <text x="50" y="60" fill="black" 
      font-family="Arial, Helvetica, sans-serif" 
      font-size="28">Revenue and Expenses</text>
   <line x1="150" y1="80" x2="150" y2="320" 
      style="stroke:rgb(155, 144, 144);stroke-width:5" />

  <script type="application/ecmascript"> 
    <![CDATA[
      var mysvg = document.getElementById("mysvg");

      var chartStart = [152, 84, 152]
      var chartWidth = [100,64,36]
      var chartNames = ["$7,110 Revenue", "$4,539 Expenses","$2,571 Profit"]
      var chartColor = ["#28CE6D","#DF3456","#4DC7EC"]
      var num = chartNames.length;

      while (num-- > 0)
      {
       var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("x", chartStart[num]);
        rect.setAttribute("y", [num] * 70 + 100);
        rect.setAttribute("width", chartWidth[num]);
        rect.setAttribute("height", "50");
        rect.setAttribute("style", "fill:" + chartColor[num] + ";stroke:black;stroke-width:0;opacity:1");

     var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
         label.setAttribute("x", "280");
         label.setAttribute("y", [num] *70 + 130);
         label.setAttribute("style", "fill:black");
         label.setAttribute("font-family", "Arial, Helvetica, sans-serif");
         label.setAttribute("font-size","18");
     var txt = document.createTextNode(chartNames[num]);
         label.appendChild(txt);

         mysvg.appendChild(rect);
         mysvg.appendChild(label);
       } 
  ]]>
   </script>
 </svg>

我得到的图像是：

我期望的图像是：

更新

我在添加的评论中尝试了Sydney的建议

<svg id="mysvg" viewbox="0 0 800 300"

并在阅读 Mozilla 文章后将 Javascript 更改为悉尼的修订版：

ctx.drawImage(this, 0, 0, this.width, this.height);

但这导致了完整的图像，而不是截断，而是 300 x 150 尺寸，这已将其缩放为质量非常低的图像。

如何使输出为 800 x 300 而不仅仅是控制用于创建图像的输入的大小？谢谢

Answer 1

这似乎只是正确设置画布宽度和高度的问题。我尝试了你的 setHeight() 和 setWidth() 方法，但它们对我不起作用，但内联宽度和高度解决了这个问题，没有任何其他添加！

<svg id="mysvg" width="800" height="300"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- stuff -->
</svg>
<canvas width="800" height="300" id="canvas"></canvas>