SVG到PNG没有宽度属性

Question

哦，嗨。我有一个 SVG，我正在将其转换为 png 并上传到服务器。只要我在 SVG 标签中明确给出宽度和高度值，一切都会正常工作。我使用 viewBox=" " 给 SVG 一个纵横比，没有宽度和高度属性，svg 可以很好地缩放到浏览器窗口中。因此，我不想在标签中包含宽度和高度。

以下是代码的相关部分：

var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var nzs ="";
var canvas = document.createElement( "canvas" );
canvas.width = $('#mainSVG').width();// I tried giving the canvas a size, but it doesn't help 
canvas.height = $('#mainSVG').height();
console.log(canvas.width +" " + canvas.height);
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
	ctx.drawImage( img, 0, 0);
//	ctx.drawImage( img, 0, 0, $('#mainSVG').width(), $('#mainSVG').height() ); // I tried setting the image size in this line but it didn't work either.
	nzs= canvas.toDataURL( "image/png" ); 
	$.ajax({
	  url:"hidden.php",
	  data:{base64: nzs},
	  type:"post",
	  complete:function(){
		console.log("Ready");
	  }
	});
	};

<svg id="mainSVG" clasxmlns="http://www.w3.org/2000/svg" viewBox="0 0 2800 1600">
<!-- <svg id="mainSVG" clasxmlns="http://www.w3.org/2000/svg" viewBox="0 0 2800 1600" width="800" height="1000"> If i use this tag everything works --!>

如何将动态创建的宽度和高度插入 SVG 标记？我想过操纵 svgData 字符串以包含宽度和高度属性，但这不是最简单的方法。提前谢谢你。

Answer 1

var svg = document.querySelector( "svg" ).cloneNode(true); 
svg.setAttribute("width", "whatever");
svg.setAttribute("height", "something else");

然后照常继续。 cloneNode creates a deep copy，然后您可以根据需要在副本中设置属性。

Answer 2

这是可以做到的，但是很麻烦。

首先你必须得到你的svg元素的outerHTML

var mySvg = document.getElementById("mySvg").outerHTML;

这将返回类似

<svg id="mySvg" viewBox="0 0 2800 1600"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle> </svg>

现在我们需要“注入”宽度和高度属性。不幸的是，Javascript 的 String 对象没有提供在特定位置插入文本的内置方法 - 所以我们需要使用自己的函数来执行此操作。

String.prototype.splice = function(index, charsToRemove, str) {
  return this.slice(0, index) + str + this.slice(index + Math.abs(charsToRemove));
};

var width = 200;
var height = 300;

mySvg = mySvg.splice(mySvg.indexOf("svg") + 3, 0, ' width="' + width + '" height="' + height + '"');

这就是之后的样子

<svg width="200" height="300" id="mySvg" viewBox="0 0 2800 1600">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

最后让我们摆脱 viewBox 属性。为此，我们需要在 mySvg 中获取它的起始索引，并从那里获取第一个 " 和最后一个 " 的索引。通过 start- 和 endindex 我们可以再次使用 splice() 方法。

var startIndex = mySvg.indexOf("viewBox");
var endIndex = startIndex;
var occurences = 0;
do {
  if (mySvg.charAt(endIndex) == '"') {
    occurences++;
  }
  endIndex++;
}
while (occurences < 2);

mySvg = mySvg.splice(startIndex,endIndex-startIndex,'');

改变svg元素的outerHTML

document.getElementById("mySvg").outerHTML = mySvg;

这是完整的例子：

String.prototype.splice = function(index, charsToRemove, str) {
  return this.slice(0, index) + str + this.slice(index + Math.abs(charsToRemove));
};

function modify(width, height) {
  var mySvg = document.getElementById("mySvg").outerHTML;

  mySvg = mySvg.splice(mySvg.indexOf("svg") + 3, 0, ' width="' + width + '" height="' + height + '"');

  var startIndex = mySvg.indexOf("viewBox");
  var endIndex = startIndex;
  var occurences = 0;
  do {
    if (mySvg.charAt(endIndex) == '"') {
      occurences++;
    }
    endIndex++;
  }
  while (occurences < 2);

  mySvg = mySvg.splice(startIndex, endIndex - startIndex, '');
  document.getElementById("mySvg").outerHTML = mySvg;
}

<button onclick="modify(400,300)">modify</button>
<svg id="mySvg" viewBox="0 0 2800 1600">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>