Question

我在使用URL作为源显示图像时遇到问题，问题是当用作<mask>时，它不会显示在我的svg <image x="0" y="0" height="350" width="350" attr.xlink:href="URL">中，我知道这必须可行因为当我将标记放置在svg中的其他位置时，标记确实会显示，但是因为我希望将其放在<mask>中，所以我需要找到一种成功的方法。当我在记事本文件中打开图像并将数据复制到<mask>标记中时，它可以很好地工作，但是由于URL更改时我需要<image>进行更改，因此我无法将其硬编码到{{ 1}}

因此，我想到的解决方案是将<mask>转换为字符串以获得数据并将其放入一个变量中，该变量可以放置在掩码中。但是，即使有可能，我也找不到任何地方应该如何转换它。我想转换我的html页面的这个元素

<image>

将其放入变量中：

<svg xmlns:attr.xlink="http://www.w3.org/2000/xlink">
      <image height="350" width="350" attr.xlink:href="URL"></image>
 </svg>

有没有办法在javascript / typescript中做到这一点？还是我应该尝试其他方式。我在这个项目中使用了角度

编辑

我正在尝试这种方法，因为我不知道该如何解决我的角度应用程序中的问题。

我正在尝试在网上商店的productimage上显示设计，这些设计由文本元素组成，用户可以对其进行调整，并且大多数情况下会使用某种svg徽标。因为设计大部分由不同的颜色组成，所以我正在使用蒙版以确保显示正确的设计。问题是徽标没有显示，但是文字显示了，当我将原始数据粘贴到蒙版中时，它仅与蒙版中的标签一起使用而没有。因此，我正在尝试从图像标签中获取原始数据，该图像标签现在已隐藏在我的html页面顶部

如何获取svg中<img/>标签的路径和形状的数据

0 个答案: