html - SVG 负载过大

Question

我有一个简单的搜索图标作为我正在使用的 SVG，但由于某种原因，当我加载我的网页时，尽管 24x24 锁定，但它还是很大CSS 和 SVG 本身的样式。

它展开并占据整个页面，直到所有内容都加载完毕，然后它会捕捉到正常的 24x24 大小。这看起来非常荒谬，我知道我一定是做错了什么。有任何想法吗？

SVG:

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <symbol id="icon-search" class="icon" viewBox="0 0 24 24">
        <title>search</title>
        <circle class="st0" cx="9.3" cy="9.2" r="8.6" />
        <line class="st1" x1="15.3" y1="15.4" x2="23.3" y2="23.4" />
    </symbol>
</defs>

HTML:

<div class="searchContainer">
     <div class="search">
          <input class="image" type="image" src="images/search.svg"><input class="text" type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" onblur="if (this.value == '') { this.value = 'Search'; }">
      </div><!-- /search -->
</div><!-- /searchContainer -->

CSS:

input.image{
   fill: black;
   width: 24px;
   height: 24px;
   border: 0;
   padding-top: 9px;
   text-align: right;
}

Here是我在加载时看到的。

请注意，其他图标也是 SVG，但它们是在单个文件中完成的，使用的方法我无法在搜索输入中使用。

<svg><use xlink></use></svg>

感谢任何帮助。谢谢!

Answer 1

您可以通过将宽度和高度属性直接添加到 SVG 来解决这个问题。例如，您的 SVG 可能看起来像这样:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 225" width="20" height="20"> 
  <title>Search</title>
  <path fill="#fff" d="M225 202v8c-2.7 7.3-7.6 12.4-15 15h-8c-7.3-1.2-12.4-5.7-17.3-10.9-6.6-7-13.6-13.7-20.4-20.6-11.5-11.6-22.9-23.2-34.3-34.7-18 10.2-36.7 14.6-56.6 11.2-34.8-5.9-57.9-25.9-69.3-59.2C2 105.2 1.3 99 0 93V78c.3-.8.7-1.5.8-2.3C6.1 38.8 27 15 62.1 3.4 67.2 1.7 72.7 1.1 78 0h15c3.6.7 7.1 1.3 10.7 2C140 8.7 170 44.2 171.1 81.2c.5 17.2-3.3 33.3-12.5 49.2 1.3 1 3 1.9 4.2 3.2 17.1 17 34.1 34.2 51.3 51.2 5.1 4.9 9.7 9.9 10.9 17.2zM85.1 146.9c33 .5 61.5-27.3 61.9-60.4.4-33.7-26.7-61.5-60.6-62.2-33.3-.7-61.5 26.8-62.1 60.6-.6 33.3 27 61.5 60.8 62z"/>
</svg>

请注意它特别指出 width="20"height="20" 的地方。这将在图像加载时限制 SVG 大小。然后您可以根据需要使用 CSS 调整高度和宽度。