svg 转换为符号时发生变化答案

【问题标题】：svg changes when converted to symbolsvg 转换为符号时发生变化
【发布时间】：2017-06-18 13:32:58
【问题描述】：

我有这个虚拟 svg 显示一个圆圈，里面有一些灰色的图形

<svg viewBox="0 0 86 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <circle id="path-1" cx="43" cy="43" r="43"></circle>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g transform="translate(-585.000000, -391.000000)">
        <g transform="translate(585.000000, 391.000000)">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Oval" fill="currentcolor" xlink:href="#path-1"></use>
            <g id="Group" mask="url(#mask-2)" fill="#b8b8b8">
                <g transform="translate(21.500000, 27.823529)" id="Page-1">
                    <path d="M0.5,0.176470588 L0.5,58.1764706 L15.5,58.1764706 L15.5,49.1764706 L29.5,49.1764706 L29.5,31.1764706 L7.5,31.1764706 L7.5,37.1764706 Z"></path>
                </g>
            </g>
        </g>
    </g>
</g>

当我使用带有模式符号的 gulp-svg-sprite 将其转换为精灵时，我得到了这个结果

<?xml version="1.0" encoding="UTF-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 86 86" id="company"><defs><circle id="aa" cx="43" cy="43" r="43"/></defs><g fill="none" fill-rule="evenodd"><mask id="ab" fill="#fff"><use xlink:href="#aa"/></mask><use fill="currentcolor" xlink:href="#aa"/><g mask="url(#ab)" fill="#b8b8b8"><path d="M22 28v58h15v-9h14V59H29v6z"/></g></g></symbol></svg>

现在灰色的图形脱离了圆圈，如果我将原始 svg 中的根 defs- 和 g-tags 直接复制到 symbol-tag 中，也会发生这种情况。我也尝试在符号版本中插入一个 clipPath，但没有成功。

我在这里错过了什么？

【问题讨论】：

标签： svg gulp svg-sprite

【解决方案1】：

更新：简化您的 svg 可能会起作用...尝试以下示例，一个使用符号，一个不使用（如果 gulp sprite 代码不能有嵌套符号）...这可能是 defs 区域的问题。

svg {
  width: 100px;
}

<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="c">
      <circle cx="43" cy="43" r="43" fill="currentColor" />    
    </symbol>
    <mask id="mask" color="#fff">
      <use xlink:href="#c" />
    </mask>
  </defs>
  <use xlink:href="#c" color="#666" />
  <path fill="#999" mask="url(#mask)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>

<svg viewBox="0 0 86 86" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask2" color="#fff">
      <circle cx="43" cy="43" r="43" fill="#FFF" />
    </mask>
  </defs>
  <circle cx="43" cy="43" r="43" fill="currentColor" />
  <path fill="#999" mask="url(#mask2)" d="M10 0v60h30v-10h20v-20h-30v9z" />
</svg>

【讨论】：

它给了我一个位置错误的图形 - 但如果我调整位置，即使不是符号，它也会脱离圆圈。
已更新...但需要在 gulp 任务中尝试以查看输出...发布问题输出？
似乎某些（或全部？）defs 被忽略了 svg-sprite 的工作方式，除非将 defs 移到符号之前，否则会被使用。我已经发布了我的解决方案作为答案。感谢您的努力！

【解决方案2】：

这可能不是一个完整的答案，但我设法让它发挥作用；

首先我使用我的圈子通过 clipPath 扩展了我的 defs

<defs>
    <circle id="circle" cx="43" cy="43" r="43"></circle>
    <clipPath id="clippath"><use overflow="visible" xlink:href="#circle" /></clipPath>
</defs>

然后，在我的第一组中使用 clipPath 并从 gulp-svg-sprite 切换到 gulp-svgstore（将 defs 移动到顶部，符号上方）给了我我期望的单个 svg 和 svg符号精灵。

【讨论】：