如何使用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" />