Javascript 从JSON动态更改HTML画布上的SVG形状？

背景： 我在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的定义（

）部分中的

id=“path_1”

引用

。您可以在“定义”部分中添加任意路径（或矩形、圆等），然后在以后引用它

id=“path_1”

在

中作为

的属性

xlink:href=“#path_1”

引用。在

中，它也被

id=“Mask”

引用为在那里找到的3个

元素的属性

xlink:href=“#path_1”

以下是根据您发布的源代码创建的示例：

我所做的是在

中创建另一个路径，以取代以前的路径。我保留了上一个路径（

path_1

）的id，因此不必更改它下面代码中的任何引用。结果是一个新的形状，不会扭曲任何东西

我还建议在为web提供SVG时，优化路径以减少小数点，或者使用矩形和圆形等基本体，因为这样可以减少文件大小和渲染时间。我没有精神错乱的经验，但它看起来只是生成路径，而不是原始形状

---

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

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