Question

我正在尝试导出我的Bootstrap Studio项目。在预览模式下，SVG工作正常，<use>正在工作，但导出<use>后不再工作，Bootstrap无法设置SVG文件的文件路径。

我该如何解决问题？

<svg class="svg icon" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="standard-sprite.svg#contact"></use>
</svg>

Answer 1

当你写作时，你的道路就会被打破。

xlink:href="standard-sprite.svg#contact"

根据导出位置更改此内容。

也许该文件位于桌面，服务器或图像文件夹的文件夹中。所以它应该像是

xlink:href="images/svg/standard-sprite.svg#contact"

或者是你的html内联的svg？

你可以这样做把你的精灵svg放在隐藏div中的html中

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="standard-sprite" viewBox="0 0 20 20">
    <title>standard-sprite</title>
    <path d="..." />
  </symbol>
</svg>

稍后在html中调用你的svg

<svg>
  <use xlink:href="#standard-sprite" />
</svg>

从Bootstrap Studio导出后SVG无法正常工作

1 个答案: