SVG 使用元素不显示路径

Question

我正在尝试使用 SVG 精灵技术在需要时显示单个 SVGS，并通过 'use' 元素调用它们。我知道这有点棘手，因为阴影 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 class 'icon' 显示在适当的位置，但 use 元素显示在 div 之外和页面下方。这可能是因为用户代理样式表具有 svg:not(:root) {overflow: hidden;}?

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

Answer 1

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

SVG 使用元素不显示路径

SVG use element not showing paths

html

css

svg

sprite