时间戳

首页 > 解决方案 > 循环插值 SVG 精灵

html - 循环插值 SVG 精灵

问题描述

我一直在试图弄清楚如何在循环中插入这些 svg 精灵。html svg < use > 元素的路径缺少一些东西。

环形

each feature, slug in public.feature._data
  .feature__wrap
    .feature__image
      svg
        use(xlink:href="/assets/defs.svg#icon-feature-#")
  .feature__content
    h3.feature__title #{ feature.title }
    p.feature__text #{ feature.text }

svg 精灵

<symbol id="icon-feature-1" viewBox='0 0 512 512'>
  <desc>Monitor Icon</desc>
  <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
<symbol id="icon-feature-2" viewBox='0 0 512.004 512.004'>
  <desc>Cellphone Icon</desc>
  <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
<symbol id="icon-feature-3" viewBox='0 0 64 64'>
  <desc>Gear Icon</desc>
  <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>

注意：我只是使用了一个随机的 svg <path> 以使其更易于阅读并减少片段上的字符数量

注意2：我已经仔细检查了每个单独的路径，它工作得很好，以便我在我的代码的其他部分中插入的其他精灵没有循环。

标签： htmlcsssvgfrontendstring-interpolation

解决方案

推荐阅读