Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
svg在转换为符号时会发生变化_Svg_Gulp_Svg Sprite - Fatal编程技术网

svg在转换为符号时会发生变化

svg在转换为符号时会发生变化,svg,gulp,svg-sprite,Svg,Gulp,Svg Sprite,我有一个虚拟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> <

我有一个虚拟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>

当我使用带有模式符号的GulpSVG 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-标记直接复制到符号标记中,也会发生这种情况。我也尝试过在符号版本中插入clipPath,但没有成功


我在这里遗漏了什么?

更新:简化svg可能有用。。。尝试以下示例,一个使用符号,一个不使用符号(以防gulp sprite代码不能有嵌套符号)。。。这可能是defs区域的问题

svg{
宽度:100px;
}

这可能不是一个完整的答案,但我设法让它起作用

首先,我用一个clipPath扩展了我的def

<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(这会将def移到符号上方的顶部)给出了我所期望的单个svg和svg符号精灵。

它给了我一个位置错误的图形-但如果我调整位置,即使不是符号,它也会脱离圆圈。更新。。。但是需要在吞咽任务中尝试它才能看到输出。。。输出是否有问题?似乎svg精灵的工作方式忽略了部分(或全部?)DEF,除非将DEF移到符号之前,否则会使用这些DEF。我已将我的解决方案作为答案发布。谢谢你的努力!