SVG 未显示在我的本地主机上 Apache v3.3.0答案

【问题标题】：SVG is not showing on my localhost Apache v3.3.0SVG 未显示在我的本地主机上 Apache v3.3.0
【发布时间】：2021-07-23 10:58:10
【问题描述】：

我尝试在标题部分使用搜索图标，但未显示。我尝试了一切，但仍然没有机会！

我添加了 AddType image/svg+xml .svg .svgz 我尝试了 AddType image/svg+xml svg svgz 和我在网上找到的其他几行，但仍然没有机会。有人能告诉我我现在应该做什么吗？然而，我的其他 SVG 显示出来了，这很奇怪！

.SearchIcon{
    background-image: url(icons/search-solid.svg);
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 15px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    filter: invert(32%) sepia(24%) saturate(298%) hue-rotate(132deg) brightness(98%) contrast(89%);
    
}

&lt;a href="#"&gt;&lt;i class="SearchIcon"&gt;&lt;/i&gt;&lt;/a&gt;

这是我的 SVG 文件：

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

您可以将 svg-tag 插入正文，而不是将其用作背景图像：

#my-svg{
  height: 50px;
  width: 50px;
  color: #2c676f;
}

<html>
  <head>
  
  </head>
  <body>
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="my-svg"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
  </body>

</html>

使用 CSS 可以更改显示的大小或颜色。

【讨论】：

你的答案确实有效！我使用了 chrome，但我的 Chrome 有问题，这就是它没有显示的原因