如何將多個 SVG 保存在一個文件中並根據條件使用其中一個？

Question

我正在使用 angular，問題是，如果我將所有 SVG 放在一個文件中，是否可以根據條件動態地將它們放入 HTML 代碼中？ 它必須是 SVG，因為我也需要動態使用填充選項。

我可以只使用 *ngIf 但使用長 SVG 代碼，它變得不可讀。 有可行的解決方案嗎？ 謝謝！

Answer 1

所以這就是我在 angular 中解決這個問題的方法。 我為每個 svg 制作了單獨的組件。 然后將描邊和填充值傳遞給這些組件，並使用該值分配 class。

所以基本上，我從后端獲得值 X，這些值被傳遞給組件，並且有條件地切換。

<app-example-svg [fill]="fill" [stroke]="stroke"  *ngIf="type === 1"> </app-example-svg>

現在這個值決定了使用哪個 svg。

第二，我使用這些值來更改應用的類。

ngOnChanges() {
    this.changeColor(this.fill, this.stroke);
  }
  changeColor(fill, stroke) {
    if (stroke) $('.svg').addClass(`stroke${stroke}`);
    if (fill) $('.svg').addClass(`fill${fill}`);
  }

我可以動態切換 SVG，動態切換填充和描邊屬性。

感謝所有回復的人！