文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用ruby on rails在伪元素中显示svg sprite中的图标

问如何用ruby on rails在伪元素中显示svg sprite中的图标
EN

Stack Overflow用户

提问于 2021-08-13 12:26:03

回答 1查看 94关注 0票数 0

我想创建一个像这样的菜单，其中右箭头是Home >精灵中的一个图标。我想把>作为一个psuedo元素放在css选择器中，这样我就可以通过添加css选择器.menu-arrow来使任何菜单具有右箭头。我正在尝试用ruby on rails 6来做这件事，但是没有成功。

我已经尝试添加svg图标精灵作为背景内容，但它似乎不能正常工作。

我的svg精灵

path to svg sprite: app/assets/images/sprites.svg


<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-check-solid" viewBox="0 0 32 32">
<path d="M10.869 27.463l-10.4-10.4c-0.625-0.625-0.625-1.638 0-2.263l2.263-2.263c0.625-0.625 1.638-0.625 2.263 0l7.006 7.006 15.006-15.006c0.625-0.625 1.638-0.625 2.263 0l2.263 2.263c0.625 0.625 0.625 1.638 0 2.263l-18.4 18.4c-0.625 0.625-1.638 0.625-2.263-0z"></path>
</symbol>
<symbol id="icon-chevron-down-solid" viewBox="0 0 28 32">
<path d="M12.939 23.842l-12.146-12.146c-0.586-0.586-0.586-1.536 0-2.121l1.417-1.417c0.585-0.585 1.533-0.586 2.119-0.002l9.672 9.626 9.672-9.626c0.586-0.583 1.534-0.582 2.119 0.002l1.417 1.417c0.586 0.586 0.586 1.536 0 2.121l-12.146 12.146c-0.586 0.586-1.536 0.586-2.121 0z"></path>
</symbol>
</defs>
</svg>`

我的css类

.menu-arrow {
      &::after {
        content: '';
        display: inline-block;
        height: 2rem;
        width: 2rem;
        background-image: asset-url("images/sprites.svg#icon-chevron-down-solid");
        transform: rotate(90deg) scale(1.5);
        fill: var(--color-white);
        color: var(--color-white);
        font-weight: 700;
        border: 1px solid red;
      }
    }
}

我该怎么做呢？

sprite

css

ruby-on-rails

svg

sass

回答 1

Stack Overflow用户

发布于 2021-08-31 03:19:26

此article表示CSS url中的#id引用的是view而不是symbol

当然，您可以通过use将sprite用作内联SVG (阴影) DOM元素，并创建一个helper来简化该过程(see this)

具体来说，对于你的人字形，你可以使用你的伪元素来实现几乎相同的图形元素，而不需要背景(两侧的边框带有圆角和旋转45度)。我制作了一个笔式here来演示这种方法。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68772302

复制

相似问题

问如何用ruby on rails在伪元素中显示svg sprite中的图标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用ruby on rails在伪元素中显示svg sprite中的图标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用ruby on rails在伪元素中显示svg sprite中的图标
EN