html - SVG 负载过大

标签 html css svg

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

它展开并占据整个页面,直到所有内容都加载完毕,然后它会捕捉到正常的 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>

感谢任何帮助。谢谢!

最佳答案

您可以通过将宽度和高度属性直接添加到 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 调整高度和宽度。

关于html - SVG 负载过大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36287277/

相关文章:

javascript - 动态更新 SVG

html - CSS 布局问题(图像两侧各有一个按钮)

html - 如何删除 HTML 电子邮件周围的所有空白区域?

html - 如何垂直对齐 HTML 段落中的跨度和文本?

javascript - 使用 jquery 创建动态 html 页面

html - 如何增加 nav-pills bootstrap 之间的空间?

javascript - 如果 jquery 验证激活,如何在单选按钮中放置红色边框

javascript - 如何在 Quill(富文本编辑器)中检测和 trim 前导/尾随空格?

javascript - d3.js 读取数据集时出现问题

javascript - Paperjs 0.9.25 - item.setRampPoint 不是函数