html - 为什么 SVG 图标不出现在标题中？

Question

我尝试在 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.

不安全尝试加载 URL svg中讨论了此问题

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

标签： htmlcsssvg

Answer 1

正如您所确定的，这显然不是您的 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-cartsvg 设置在display:nonesprite 内部，因此您只需要定位它及其所有子对象即可显示它。

将您的 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 元素仍处于隐藏状态：