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

Question

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

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

在我的 hbs 文件中。

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

Answer 1

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

但是您可能根本不需要ember-inline-svg。是否有可能将您的 svg inline 放入组件中？

只需创建一个组件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" />