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类'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使用元素不显示路径

1 个答案: