Question

从我对SVG进行的大量搜索中，我无法找到解决方案而不必妥协。我想：

1- 外部SVG文件：分组将SVG图标（Sprite或Stacks）分开，因为这会减少HTTP请求的数量，并使用缓存。

2- 简单HTML声明，使用有限的卷来保持可读结构（例如：没有内联...）。

3- 无HTML设置，如尺寸，视图或其他。一切都应该在CSS或SVG中完成

4- 操纵SVG的能力用于所有类型的交互：CSS，脚本等

我找到的最接近的解决方案是使用Viewbox属性在元素内定义SVG精灵中的每个单独图标，然后使用类似

的内容

<svg class="myIcon">
     <use xlink:href="#mySymbol"></use>
</svg>

SVG中的

：id =“mySymbol”与视图框耦合并显示精灵所需的部分。在CSS中：我可以准备转换和：悬停属性......

但是我首先需要使用内联代码来包含SVG精灵，这些精灵不能被缓存。我尝试使用：

<object data="mySVGsprite.svg" type="image/svg+xml"></object>

只是在顶部，但这不起作用...有没有人解决所有这些问题的解决方案？小丑：我很乐意使用GULP + SASS自动化流程。提前谢谢。

贝特朗