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

Posted 2023-03-04

【中文标题】如果未找到 ID，如何默认 SVG 精灵

【英文标题】：How to default a SVG sprite if an ID was not found

【发布时间】：2019-07-08 22:55:59

【问题描述】：

我的数据库中有一个 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-*** 不存在，我该怎么做才能仍然显示默认值（即：svg/icons.svg#wt-icon-default）？

【问题讨论】：

为什么不只是有一个默认图标 (wt-icon-default)，并将 icon 属性设置为 "default" 对于您没有图标的任何记录？

我知道，但是数据库客户端和设计团队设法实现了多少 svg 之间没有联系。

【参考方案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>

【讨论】：

但是如果找到图标，那么两者都会出现。

@GRboss 是的，但是找到的图标会和“占位符”图标重叠，所以你只会看到一个图标