Question

我想使用能够使用CSS动态更改颜色和大小的图标。我决定使用SVG图标，灵感来自CSS Tricks在其网站上使用SVG图标的方式。

我是这样做的（类似于CSS技巧）：

在我的页脚模板中，我添加了类似的内容：

<footer>
    <!-- Amazing footer -->
    <!-- ... -->
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
      <symbol id="icon-search" viewBox="0 0 470 470">
        <title>icon-search</title>
        <path d="M447.05,428l-109.6-109.6c29.4-33.8,47.2-77.9,47.2-126.1C384.65,86.2,298.35,0,192.35,0C86.25,0,0.05,86.3,0.05,192.3   s86.3,192.3,192.3,192.3c48.2,0,92.3-17.8,126.1-47.2L428.05,447c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4   C452.25,441.8,452.25,433.2,447.05,428z M26.95,192.3c0-91.2,74.2-165.3,165.3-165.3c91.2,0,165.3,74.2,165.3,165.3   s-74.1,165.4-165.3,165.4C101.15,357.7,26.95,283.5,26.95,192.3z"></path>
      </symbol>
    </svg>
</footer>

现在我可以在任何我喜欢的地方使用图标：

<form>
    <input type="text" name="q" placeholder="Search here...">
    <button type="submit">
        <svg class="icon-svg icon-search" width="22px" height="22px">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
        </svg>
    </button>
</form>

它有效......但有时在页面加载时，一些随机图标根本无法显示。到目前为止，这个问题是关于chrome的，例如似乎没有在firefox中。知道是什么原因引起的吗？我的实施有什么问题吗？

感谢。

Answer 1

我之前必须调试这个，重新加载后丢失的图标总是会加载。它让我发现，如果页面加载停滞了一点并且图标位于页面末尾附近，<use xlink:href="...">元素找不到它引用的符号。

将SVG图标放置在页面顶部附近可以解决问题（在<use>的任何实例之前）。

随机SVG图标将无法加载

1 个答案: