为什么 SVG 图标不出现在标题中？答案

【问题标题】：Why the SVG icon does not appear in heading?为什么 SVG 图标不出现在标题中？
【发布时间】：2021-11-21 20:51:48
【问题描述】：

我尝试在 h1 标题元素中添加一个 SVG 图标：

<h1>
            <svg class="my-svg-inline--fa my-fa-w-18">
                <use href="https://www.datanumen.com/wp-content/themes/datanumen/images/icons/icons.svg#shopping-cart"></use>
            </svg> Buy Full Version Now!
        </h1>

但 SVG 图标不会出现。原始 URL 是 https://www.datanumen.com/outlook-repair-order/?nowprocket，我在 JSFiddle 中的 https://jsfiddle.net/alanccw/871v6jke/3/ 创建它以演示该问题。两者都不会显示 SVG 图标。

更新

在 JSFiddle 中测试时，出现以下错误：

fiddle.jshell.net/:140 Unsafe attempt to load URL https://www.datanumen.com/wp-content/themes/datanumen/images/icons/icons.svg from frame with URL https://fiddle.jshell.net/alanccw/871v6jke/3/show/?editor_console=. Domains, protocols and ports must match.

这个问题在Unsafe attempt to load URL svg讨论过

但在原来的网址中，没有这个问题，但图标仍然不显示。

【问题讨论】：

您为什么不想使用<img> 来代替它？它可以加载您的 SVG。
@Brad, 可能无法在 SVG 精灵中使用符号？看我的测试jsfiddle.net/alanccw/871v6jke/6
如果您按照 Brad 的建议考虑使用图片，请阅读How SVG Fragment Identifiers Work
@enxaneta，谢谢。看来我需要修改 SVG 文件以使用 viewbox 来识别 SVG 的不同部分，这不是很复杂。
也许没有那么复杂（除非你没有任何 javascript 技能）是一个现代的 Web 组件来为图标创建 SVG：iconmeister.github.io

标签： html css svg

【解决方案1】：

似乎某些 CSS 正在为您网站中的图标设置 display:none。而在 jsfiddle 它没有显示，因为这个在您的网站中将您的 svg 代码替换为此。这很好用：D。

<svg class="my-svg-inline--fa my-fa-w-18">
<use href="/wp-content/themes/datanumen/images/icons/icons.svg#shopping-cart" style="display: block;"></use>
</svg>

【讨论】：

【解决方案2】：

样式规则似乎正在将display: none; 添加到<use> 元素。

当我禁用此样式规则时，会出现 SVG。

【讨论】：

【解决方案3】：

这显然不是您的 SVG 的问题，正如您所确定的：您的社交图标（例如 .../icons.svg#facebook-f）正在加载没有任何问题，并且它们是从同一个 SVG 精灵加载的。

问题是您的父 div：cta。您使用以下 CSS 将所有内容隐藏在其中：

single-wporder .hero-page-wporder .cta * {
    display:none;
}

然后覆盖cta 的子元素的样式，使用以下内容：

.single-wporder .hero-page-wporder .cta h1, 
.single-wporder .hero-page-wporder .cta h1 svg, 
.single-wporder .hero-page-wporder .cta h1 path {
    display: inline-block;
}

问题是最后一行。 shopping-cart svg 在 sprite 中设置为 display:none，因此您只需定位它及其所有子对象即可显示它。

将您的 CSS 更新为：

.single-wporder .hero-page-wporder .cta h1, 
.single-wporder .hero-page-wporder .cta h1 svg, 
.single-wporder .hero-page-wporder .cta h1 svg * {
    display: inline-block;
}

SVG 现在可见，您的 CTA 元素仍处于隐藏状态：

【讨论】：