html - 如果未找到 ID，如何默认 SVG 精灵

Question

我的数据库中有一个 SVG 精灵和一个图标/徽标列表。

我遍历所有这些并使用模板引擎生成我的图标，例如：

<div class="partsvg__container">
  <svg class="partsvg__wt-icon partsvg__wt-icon--{{icon}}">
    <use xlink:href="svg/icons.svg#wt-icon-{{icon}}"></use>
  </svg>
</div>

我可能没有为数据库中的每个项目提供 SVG，在这种情况下，模板会呈现一个空白区域。

我该如何做到这一点，如果（例如）svg/icons.svg#wt-icon-stackoverflow尽管不存在，仍然显示默认值（即：）svg/icons.svg#wt-icon-default？

Answer 1

我找到了解决办法！
您可以在 svg 中为“未找到的情况”插入一个符号。这样，如果找不到符号，则会在背景中绘制一个占位符。

<div class="partsvg__container">
  <svg class="partsvg__wt-icon partsvg__wt-icon--{{icon}}">
    <use xlink:href="svg/icons.svg#wt-icon-{{'Placeholder'}}"></use>
    <use xlink:href="svg/icons.svg#wt-icon-{{icon}}"></use>
  </svg>
</div>