如何使用 ember-inline-svg 将属性值发送到 svg 文件？

Question

我正在使用 ember-inline-svg，有一个 logo.svg 文件，我用

调用它

{{inline-svg 'logo' class="logo" }}

在我的 hbs 文件中。

它工作正常。我只需要再向它发送一个数据参数并在 svg 文件中访问它，这样我就可以动态生成 svg。我该怎么做呢？

Answer 1

你想要的是不可能的，因为svg本身没有动态部分

但是您可能根本不需要 ember-inline-svg。是否可以将您的 svg 内联到组件中？

只需创建一个组件 Logo 并将 svg 放入 logo.hbs:

<svg height="60" width="200" ...attributes>
  <text y=20 >I love {{@name}}</text>
</svg>

然后设置tagName: ''（或使用template-only-glimmer-component）。然后你就可以把它当作一个组件来使用了：

<Logo class="logo" @name="Ember" />

How to send property values to svg files using ember-inline-svg?