如何在符号标签中使用SGV作为背景图像

Felix Eve 发表于 Dev

费利克斯·夏娃

我试图使用SVG从一个精灵作为背景图像按照这篇文章。每个图像包裹在符号标签按照这篇文章。

我的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>但这限制了我使每个图像都具有相同的大小。

罗伯特·朗森

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

您可以尝试使用svg片段标识符，这意味着将#svgView（viewBox（xBox，x，y，w，h））添加到图像URL，其中x，y，w，h是您的viewBox值，但我认为Chrome禁止它们用于图像。

请注意，内部<svg>标签会带有viewBox，因此也许您应该尝试使用该标签，而不是<g>或<symbol>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。