1

我有 svg sprite 文件，如下所示：

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 96 96" id="icon-angle-down">
        <path d="M7.2,33.7l37.9,37.2c1,0.9,1.9,1.2,2.9,1.2c1.3,0,1.8-0.2,2.8-1.1l38.1-37.4c1.6-1.5,1.6-4,0-5.6L86,25.1
	c-1.6-1.5-4.1-1.5-5.7,0L47.9,57L15.7,25.3c-1.6-1.5-4.1-1.5-5.7,0l-2.8,2.8C5.6,29.6,5.6,32.1,7.2,33.7z"/>
    </symbol>
    <symbol viewBox="0 0 96 96" id="icon-angle-left">
        <path d="M62.3,7.2L25.2,45.1C24.2,46,24,46.9,24,48c0,1.3,0.2,1.8,1.1,2.8l37.4,38.1c1.5,1.6,4,1.6,5.6,0l2.8-2.8
	c1.5-1.6,1.5-4.1,0-5.7L39,47.9l31.6-32.2c1.5-1.6,1.5-4.1,0-5.7l-2.8-2.8C66.4,5.6,63.9,5.6,62.3,7.2z"/>
    </symbol>
</svg>

我正在使用$mdIconProviderAngular 材料设计并grunt-svgstore构建我的精灵。

从上面的精灵中，我们看到了svgstore转换和制作symbol元素。然后以某种方式使用mdIcon它不起作用。但是如果我有一个像下面这样带有defs和svg元素的精灵文件。有用。

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
    <svg viewBox="0 0 96 96" id="plus">
        <path d="M7.2,33.7l37.9,37.2c1,0.9,1.9,1.2,2.9,1.2c1.3,0,1.8-0.2,2.8-1.1l38.1-37.4c1.6-1.5,1.6-4,0-5.6L86,25.1
	c-1.6-1.5-4.1-1.5-5.7,0L47.9,57L15.7,25.3c-1.6-1.5-4.1-1.5-5.7,0l-2.8,2.8C5.6,29.6,5.6,32.1,7.2,33.7z"/>
    </svg>
    <svg viewBox="0 0 96 96" id="icon-angle-left">
        <path d="M62.3,7.2L25.2,45.1C24.2,46,24,46.9,24,48c0,1.3,0.2,1.8,1.1,2.8l37.4,38.1c1.5,1.6,4,1.6,5.6,0l2.8-2.8
	c1.5-1.6,1.5-4.1,0-5.7L39,47.9l31.6-32.2c1.5-1.6,1.5-4.1,0-5.7l-2.8-2.8C66.4,5.6,63.9,5.6,62.3,7.2z"/>
    </svg>
    </defs>
</svg>

那么有没有一种方法可以让我配置svgstore像第二个那样制作精灵。或者$mdIconProvider使用第一个版本。

4

0 回答 0