Question

我尝试使用精灵中的SVG作为背景图像this article。每个图像都包含在符号标记中，符合this article。

我的sprite.svg看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

    <symbol id='home' width="20" height="20" viewBox="0 0 2304 2304">
        <path d="M1728 1248v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z" fill="#7C7C7C"/>
    </symbol>

    <symbol id='plus'>
            <path d="M13.563 5.25h-4.813v-4.813c0-0.242-0.196-0.438-0.438-0.438h-2.625c-0.242 0-0.438 0.196-0.438 0.438v4.813h-4.813c-0.242 0-0.438 0.196-0.438 0.438v2.625c0 0.242 0.196 0.438 0.438 0.438h4.813v4.813c0 0.242 0.196 0.438 0.438 0.438h2.625c0.242 0 0.438-0.196 0.438-0.438v-4.813h4.813c0.242 0 0.438-0.196 0.438-0.438v-2.625c0-0.242-0.196-0.438-0.438-0.438z" fill="#000000"></path>  
    </symbol>

</svg>

我的HTML看起来像这样：

<a href="#" class="home-icon">Home</a>

我的CSS看起来像这样：

.home-icon {
    background-image: url("../img/icons/sprite.svg#home");
    height: 14px;
    overflow: hidden;
    text-indent: -100px;
    width: 14px;
}

但它没有出现。当我使用<g>标签而不是<symbol>时，它确实有效，但这限制了每个图片的大小相同。

Answer 1

<symbol>标记的内容不会直接呈现，只能通过<use>标记显示。

您可以尝试使用svg fragment identifier，这意味着将#svgView（viewBox（x，y，w，h））添加到图像网址，其中x，y，w，h是您的viewBox值，但我认为Chrome禁止他们使用图片。

请注意，内部<svg>标记会使用viewBox，因此您可能应该尝试使用它，而不是<g>或<symbol>

如何在符号标记中使用SVG作为背景图像

1 个答案: