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 IMG元素放入div中，然后适当调整div和img的大小......

<div id="logo">
  <img id="logo_img" src="assets/images/logo.svg">
</div>

  #logo {
    display: block;
    height: 50px;
  }
  #logo_img {
    height: 50px;
    width: 200px;
  }

Answer 2

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

Answer 3

内联加载SVG和样式。如果将标签放在标签上方，则会消除页面加载时的巨大卡顿现象。

Answer 4

如果您可以在<img>标签中加载svg，则直接设置img的大小

 <img src="badge.svg" width="200">

Answer 5

我的解决方案是将SVG元素的不透明度设置为0，然后在加载后将其设置为1。 1.添加不透明度：0;到CSS中的元素或其父元素。 2.可选地添加一个过渡，例如过渡：0.5s不透明度； 3.创建一个不透明度为1的新类，例如“ loaded”。 4.在JavaScript中，在load事件中添加一行，将“ loaded”类添加到SVG元素或其父元素。

Answer 6

更好的解决方案...

添加样式=“ display：none;”内联到img标签。
在页面完全加载后，使用jQuery来显示.show（）img。

  $( window ).load(function() {
  $('.container img').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
<img src="https://www.zdmdesigns.com/images/zdm-logo.svg" style="display:none;">
</div>

Answer 7

您将需要在html dom上标识您的宽度和高度。另外，请尝试使用下面的标签

<object data="your_svg_path" width="57" height="57" type="image/svg+xml">
</object>

Answer 8

不是原始问题的答案，但可能对某人有所帮助。

如果您使用 CMS 和 FontAwesome 作为 JS，您可能需要在编辑模式下禁用 FA，以便它不会替换标签。如果没有加载 FA 脚本，则保留在内容中，而不是 .

SVG在加载时超大

8 个答案: