SVG使用元素不显示路径答案

【问题标题】：SVG use element not showing pathsSVG使用元素不显示路径
【发布时间】：2016-05-04 16:16:57
【问题描述】：

我正在尝试使用 SVG sprite 技术在需要时显示单个 SVGS，并通过“使用”元素调用它们。我知道这有点棘手，因为 shadow DOM，但我不知道为什么我的元素没有正确显示。

在与这个 JSfiddle 不同的本地开发版本中，use 元素实际上显示了 SVG 和路径，但仅显示为不可见的形状。没有填充，或任何东西。只是看不见的路径。我的结构是这样的：

<nav class="nav-right">
    <div class="nav-right-left">
        <svg class="icon">
           <use class="icon-menu" xlink:href="#icon-menu"></use>
        </svg>
    </div>
</nav>

svg 类 'icon' 显示在适当的位置，但 use 元素显示在 div 之外和页面下方。这可能是因为用户代理样式表具有 svg:not(:root) {overflow: hidden;}？

任何人都可以查看 JSfiddle 并尝试解释为什么它们不能正确显示吗？ https://jsfiddle.net/qs769rk6/

【问题讨论】：

标签： html css svg sprite

【解决方案1】：

在您的情况下，每个符号的 viewBox 都是错误的，前两个参数（位于 0 0 处）不好。这两个参数都是移动遮罩以显示正确的区域，在您的情况下，遮罩位于错误的位置。对于#icon-menu，尝试像这样设置viewBox：viewBox="335 165 40 32"。

【讨论】：

哇，非常感谢！这非常有效。你能解释一下335和165吗？我以为“335 165”在左上角，不应该移动。
另外，我读到一篇文章说前两个参数应该很少从“0 0”改变，因为我的精灵是一行 SVG，我不认为这个属性会改变。
如果您的图标与 SVG 的原点 (0,0) 对齐，则“0 0”是正确的，但您的符号不是。例如，“图标菜单”的 viewBox 是“127 0 40 32”，这意味着所有内容都应该适合 (127,0) 到 (167,32) 的区域。但是，如果您查看路径的坐标，您会发现其中一些比这大得多（例如 326.2,183.1）。所以看起来大部分（如果不是全部）符号视图框都是错误的。
哦，好吧，那么我如何确保图标与原点正确对齐？当我设置 SVG 时，我在 illustrator 中根据 SVG 的坐标设置了视图框
其实我现在明白了。我拿了 SVG 代码并去掉了 display: none 和带有 viewBox 的符号元素，并创建了一个 SVG 文件并在 illustrator 中打开它。这些元素不在画板上，并且位于您提到的确切坐标处。关于如何确保它们显示在正确的 (0,0) 坐标上的任何想法？