从Angular中的JSON动态更改HTML画布上的SVG形状？答案

【问题标题】：Dynamically change SVG shapes on HTML canvas from JSON in Angular?从Angular中的JSON动态更改HTML画布上的SVG形状？
【发布时间】：2020-09-03 00:46:52
【问题描述】：

背景： 我与一些 Angular 项目的人一起工作，他们要求我为他们创建 SVG 图形； SVG 绘制在 HTML 画布上，代表空间中的障碍。

障碍物的坐标来自 .json 文件，例如：

"obstacles": [
{
    "y": 0,
    "x": 0,
    "w": 125,
    "h": 700
},
{
    "y": 0,
    "x": 0,
    "w": 500,
    "h": 50
},

问题：如果使用纯色的 SVG，图形看起来是正确的，我们现在这样做，但是，我想问一下是否有可能创建这样的东西：

因此，我想知道，由于 SVG 的对角线网格由蒙版界定，是否有一种优雅的方法可以仅以编程方式更改边界形状而不扭曲底层蒙版网格图案？ SVG 元素的代码看起来相当庞大和复杂，所以我想知道该怎么做。

这是它的源代码以防万一：SVG Source Code

我希望我写的内容可以理解，如果没有，请随时提出任何问题，

非常感谢，

【问题讨论】：

如果您始终使用 userSpaceOnUse 单位，您可能会更幸运。

标签： javascript html node.js angular svg

【解决方案1】：

掩码和过滤器都引用<path> 和id="path_1"，这在SVG 的定义(<defs></defs>) 部分中。您可以在定义部分添加任意路径（或矩形、圆形等），然后再引用它。 id="path_1" 在 <clip-path> 中被引用，id="mask-1" 作为 xlink:href="#path_1" 的属性 <use>。它还在<g> 中被引用，其中id="Mask" 作为属性xlink:href="#path_1" 的3 个<use> 元素。

以下是根据您发布的源代码创建的示例：https://www.paste.org/105489

我所做的是在<defs></defs> 中创建了另一个路径来代替之前的路径。我保留了上一个路径 (path_1) 中的 id，因此我不必更改它下面代码中的任何引用。结果是一个不会扭曲任何东西的新形状。

我还建议在为 Web 提供 SVG 时优化路径以减少小数点或使用矩形和圆形等基元，因为它会减少文件大小和渲染时间。我没有使用 Lunacy 的经验，但它看起来只是生成路径而不是原始形状。

Inkscape 可方便地进行 SVG 操作和校对。您可以在 Inkscape 中创建任意形状，直接从 Inkscape XML 查看器复制到您的源代码中（或导出然后复制）。 Inkscape 也有优化选项，或者如果您更喜欢命令行，SVGO 也可以。

【讨论】：