如何从CSS中使用SVG Sprite ?

2022-01-30 14:46:45 标签 csssvgsvg-sprite

HTML:

<svg>
    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>

SVG雪碧:

<svg width="0" height="0" class="hidden">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
        <path ... fill="currentColor"></path>
    </symbol>
</svg>

有没有办法从CSS中使用SVG精灵

像这样

<div class=“icon”></div>
.icon {
background-image: “/assets/images/icons-sprite.svg#icon-name”
height: 30px
}

###我使用的技术包括svg在这里描述,你创建的文档看起来像这样……

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow-left" viewBox="0 0 10 16">
        <path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>
    </symbol>
    <symbol id="arrow-right" viewBox="0 0 10 16">
        <path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>
    </symbol>
</svg>

将其包含在HTML的顶部,然后在标记中插入SVG图标,如下所示……

<svg class="arrow-right">
  <use xlink:href="#arrow-right" />
</svg>

这很简单,而且效果很好。然而,我试图在我的CSS伪类中使用相同的图标:之前和:之后使用空内容属性和SVG在后台。是这样的……

.title:after {
    float: right;
    width: 16px;
    height: 10px;
    content: "";
    background: url('#arrow-right');
}
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码