在SVG元素中使用一系列符号时可以定义defs吗?

时间:2017-07-25 21:18:18

标签: svg

我正在尝试为我正在使用的其中一个svgs定义defs。设置目前我们在SVG标签中有一堆可重复使用的图标作为符号:

<svg>
  <symbol id="id" viewBox="...">
    <path fill="#..." d="..."/>
    <path fill="#..." d="..."/>
  </symbol>

  <symbol id="id" viewBox="...">
    <path fill="#..." d="..."/>
    <path fill="#..." d="..."/>
  </symbol>

  <symbol id="id" viewBox="...">
    <path fill="#..." d="..."/>
    <path fill="#..." d="..."/>
  </symbol>
</svg>

显示其中一个图标:

<svg>
  <use xlinkHref='#id'></use>
</svg>

我有一个带有渐变的图标,在defs标签中指定,但我不确定这种使用SVG的方法是如何工作的。是使用代码块中指定defs标记的唯一方法:

<svg>
  <defs>
    <linearGradient ...>
      <stop stopColor=“#... " offset=“0%“></stop>
      <stop stopColor=“#...” offset=“100%“></stop>
    </linearGradient>
  </defs>
  <use xlinkHref='#id'></use>
</svg>

或者您可以将它放在定义符号以供重复使用的相同位置,这样您每次使用图标时都不必重新指定吗?

谢谢

0 个答案:

没有答案