javascript - 将 SVG 绘制到 Canvas 中并使用其 ID 操作绘制的元素

Question

我有一个 SVG 文件加载到 <object> 中标签。我正在使用 javascript 来操作这个 svg 中的一些元素。例如:

var theSvgXml = document.getElementById('theObject').contentDocument;
theSvgXml.getElementById('theElementId').style.display = 'inline';
theSvgXml.getElementById('theElementId').style.fill = 'red';
theSvgXml.getElementById('anotherElement').style.display = 'none';

这很完美，一切都很好。但我想知道是否可以用 Canvas 完成同样的事情。我也阅读了 kinetic js、fabric js、canvg js，并且看到了通过文件目录、xml 或图像将 svg 文件加载到 Canvas 中的各种方法。

但是在将这个 svg 文件绘制到 Canvas 中之后，我可以通过它们的 ID 来操作元素吗？

SVG 是使用 Adove Illustrator 创建的，每个图层或组都有一个 id，可以使用 css 选择器访问。同样，这可以在将 SVG 绘制到 Canvas 上之后在 Canvas 上完成吗？ (请注意 SVG 是巨大的，我考虑 Canvas 解决方案的唯一原因是因为 svg 没有显示插画乘法效果来创建阴影)

任何帮助将不胜感激。谢谢。

代码片段:

<g id="Pockets">
<g id="Pen__x26__Radio_Arm_Pocket" class="st791"> … </g>
<g id="Pen_Pocket_Arm" class="st791"> … </g>
<g id="Card_Zipper_Arm_Pocket" class="st791"> … </g>
<g id="Radio_Pocket_Arm_Pocket" class="st791"> … </g>
<g id="Angled_Chest_Pocket_Right" class="st791"> … </g>
<g id="Angled_Chest_Pocket_Left" class="st791"> … </g>
<g id="Angled_Chest_Pocket_left_and_Right" class="st791"> … </g>
<g id="Chest_Pocket_Right" class="st791"> … </g>
<g id="Chest_Pocket_Left" class="st791"> … </g>
<g id="Chest_Pocket_left_and_Right" class="st791"> … </g>
<g id="Tool_Pocket" class="st791"> … </g>
<g id="Cargo_x2F_Mobile_Pocket_Velcro" class="st791"> … </g>
<g id="Cargo_x2F_Mobile_Pocket_Zip" class="st791"> … </g>
<g id="Cargo_x2F_Mobile_Pocket_Button" class="st791"> … </g>
<g id="Cargo_Pocket_Velcro" class="st791"> … </g>
<g id="Cargo_Pocket_Button" class="st791"> … </g>
<g id="Cargo_Pocket_Zip" class="st791"> … </g>
<g id="Back_Pocket_Right_Velcro" class="st791"> … </g>
<g id="Back_Pocket_left_Velcro" class="st791"> … </g>
<g id="Back_Pocket_left_and_Right_Velcro" class="st791"> … </g>
<g id="Back_Pocket_Right_Velcro_Button" class="st791"> … </g>
<g id="Back_Pocket_left_Velcro_Button" class="st791"> … </g>
<g id="Back_Pocket_left_and_Right_Button" class="st791"> … </g>
<g id="Back_Pocket_Right_Zip" class="st791"> … </g>
<g id="Back_Pocket_left_Zip" class="st791"> … </g>
<g id="Back_Pocket_left_and_Right_Zip" class="st791"> … </g>
</g>

正如您从 adobe illustrator 导出文件后的 xml 片段中看到的那样，每个组都设置了一个 ID。如何将这些作为对象保存在 Canvas 中(如 Fabrics.js 建议使用 getObjects() 方法)？有没有办法做到这一点？如果是，我如何引用这些组？此外，阴影是一个关键问题，我不想使用闪光灯。谢谢

Answer 1

以下是使用 Fabric 执行此操作的方法:

fabric.loadSVGFromURL('/assets/72.svg', function(objects, options){

  var group = fabric.util.groupSVGElements(objects, options);

  group
    .set({ left: 300, top: 200 })
    .scaleToWidth(500)
    .setCoords();

  canvas.add(group);
}, reviver);

function reviver(element, object) {
  object.id = element.getAttribute('id');
}

代码应该是不言自明的。我们加载 SVG； Fabric 在内部解析它，吐出代表每个元素的一组对象。然后我们将这些元素分组并将它们以一个 block 的形式添加到 Canvas 上。 Reviver 负责读取每个 SVG 元素的 id 并将其分配给相应的结构实例。

在 http://fabricjs.com/kitchensink/ 中运行此代码段你会得到:

让我们检查这个分组的对象:

canvas.item(0) + ''; "#<fabric.PathGroup (29303): { top: 200, left: 300 }>"

及其 child :

canvas.item(0).getObjects(); // Array[2287]

让我们通过 id 检索一个:

var greenland = canvas.item(0).getObjects().filter(function(obj) {
  return obj.id === 'path4206';
})[0];

如您所见，这都是普通的旧 Javascript。现在让我们更改该特定对象/形状的颜色:

greenland.fill = 'red';