Question

我需要绘制一个svg，它在画布中使用外部资源css但不能（或不应该）在defs中包含样式，因为svg将在画布中多次使用。

当我将SVGElement转换为HTMLImageElement时，我丢失了对样式的引用。

是否可以在浏览器中获取SVGElement的渲染，然后在画布中绘制它？如果没有，还有其他方法可以解决我的问题吗？

以下是我要解决的问题：

＆＃13;

var svgToParse = '\
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">\
  <circle cx="15" cy="15" r="14" fill="red" />\
  <text class="testCss" x="50%" y="65%" text-anchor="middle">&#xf040;</text>\
</svg>\
';
var domParser = new DOMParser();
var svgDoc = domParser.parseFromString(svgToParse, "image/svg+xml");

var container = document.getElementById('test_container_id');

var svg1 = svgDoc.documentElement.cloneNode(true);

// Result to obtain in canvas
container.appendChild(
	svg1
);

// Canvas
var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg2 = new Blob([svgToParse], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg2);

img.onload = function () {
  document.getElementById('canvas_id')
	.getContext('2d').drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

＆＃13;

body {
  font-family: FontAwesome;
}

.testCss {
  fill: white;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="test_container_id">
  <h3>
    Needed in canvas:
  </h3>
</div>

<h3>
Canvas:
</h3>
<canvas id="canvas_id" width="100" height="100">
  
</canvas>

＆＃13;

在画布上使用字体绘制svg而不使用defs

0 个答案: