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

Question

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

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

在我的哈佛商学院档案里。

它工作得很好。我只需要再向它发送一个数据参数，并在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" />