javascript - 如何让 SVG 解析器渲染单个组元素？

Question

我有一个代表一副纸牌的 SVG 文档。每张卡都有唯一的组和名称(即 3_hearts)。现在我希望能够将其中一张卡片渲染到 Canvas 上。这个 stackoverflow 用户也有同样的情况，但使用的是 python:How do I render *parts* of a svg file?

我正在使用一个名为 http://code.google.com/p/canvg/ 的库它提供了一个接口(interface)，以最理想的方式将 SVG 直接渲染到 Canvas 上:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

canvg 构造函数接受 svg 字符串、svg 文件的 url 或 xml 文档。

现在，我如何让 canvg 只渲染其中一张卡片？ :/提前致谢

Answer 1

理论上你应该能够使用SVG view specification为此，请遵循以下原则:

var img = new Image();
img.onload = function() { ctx.drawImage(img,0,0,200,200); }
img.src = "some.svg#svgView(viewBox(50,20,200,400))";

svgView片段语法可以选择要渲染svg的哪一部分。这是一个example (不使用 ，而仅用于 元素)。但请注意，某些浏览器尚未实现此功能。