SVG Spritesheets 在 CSS 中使用 SYMBOL CSS SVG Fragment 作为背景:url 或类似的?如果不是为什么? [英] SVG Spritesheets using SYMBOL CSS SVG Fragment in CSS as background: url or similar? if not why?

问题描述

我们可以这样做吗?在 CSS 中使用 SYMBOL CSS SVG Fragment 作为背景:url 或类似?在我看来，在所有其他条件相同的情况下，使用 SYMBOL 不起作用，其中 G 与单独的视窗工作.如果不能做到这一点，为什么?有没有更好的方法来制作 SVG Spritesheets?

Can we do this? Use SYMBOL CSS SVG Fragment USE in CSS as background: url or similar? It seems to me, all other things being equal, SYMBOL use does not work, where G with separate viewbox works. If this cannot be done, why? Is there a better way to do SVG Spritesheets?

SYMBOL 有一个 ID，有一个 viewBox..我做错了什么还是使用了符号公司.viewbox, VS, 单独的 viewbox &g = 不起作用?哦

SYMBOL has an ID, has a viewBox..am I doing somthing wrong or using symbol inc. viewbox, VS, separate viewbox & g = Does Not Work? oO

我做错了什么，或者，下面的 CSS SVG 片段用法是否仅适用于单独的视图框和 G(而不适用于带有视图框的符号)?

Am I doing somthing wrong, or, does the below CSS SVG fragment usage only work with the separate viewbox and G (and not work with symbol with viewbox)?

符号 SVG

<symbol xmlns="http://www.w3.org/2000/svg" transform="rotate(360)" viewBox="0 0 24 24" id="basket">
    <path fill="none" stroke="#626262" stroke-width="2" d="M2 12h20l-2 11H4L2 12zm18-4l-6-7M4 8l6-7M1 8h22v4H1V8zm7 7v5m8-5v5m-4-5v5"></path>
    <path fill="rgba(0, 0, 0, 0)" d="M0 0h24v24H0z"></path>
</symbol>

..VS..

G &视图框 SVG

<view id="icon-clock-view" viewBox="0 0 32 32" />
<g id="icon-clock">
    <path d="M20.6,23.3L14,16.7V7.9h4v7.2l5.4,5.4L20.6,23.3z M16-0.1c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S24.8-0.1,16-0.1z
         M16,27.9c-6.6,0-12-5.4-12-12s5.4-12,12-12s12,5.4,12,12S22.6,27.9,16,27.9z"/>
</g>

CSS

.icon-clock {background: url(https://example.com/svg-defs.svg#icon-clock-view) no-repeat;}
.basket {background: url(https://example.com/svg-defs.svg#basket) no-repeat;}

推荐答案

这似乎很有效.以姓名"为例进行说明.

This seems to works great. Using 'name' as example to follow.

Wrap (s) & 内的 </path></symbol> 我没有使用

Wrap <path>(s) & </path> within <symbol> </symbol> I did not use <g>

将 id=name" 添加到 例如

在符号标签之外，添加一个 和一个 .上传完整文件的 URL 和视图 ID 将成为您的 SVG 片段.

Outside the symbol tags, add a <view> and a <use>. The URL, where the complete file is uploaded to, and view ID will become your SVG Fragment.

<view id="icon-name-view" viewBox="0 1240 16 16" />
<use xlink:href="#icon-name" width="16" height="16" x="0" y="1240" id="name"></use>

更改视图框以在 spritesheet 中定位 SVG，这里我使用了 Y 轴，这个特定的 SVG 位于 Y 轴 1240.保存 SVG Spritesheet 说，svg-defs.svg.

Change the viewbox to locate the SVG in the spritesheet, here I'd used Y axis, this particular SVG is located at Y axis 1240. Save the SVG Spritesheet to say, svg-defs.svg.

在您的 CSS 中使用带有 Fragment Ident 的 SVG spritesheet URL，例如

In your CSS use the SVG spritesheet URL with the Fragment Ident e.g.

background: url(https://example.com/svg/svg-defs.svg#icon-name-view) no-repeat;

为了改变颜色，我使用了过滤器，例如

To change colours I was using filter, e.g.

filter: invert(80%) sepia(21%) saturate(872%) hue-rotate(44deg) brightness(84%) contrast(91%);

定位可以用 ViewBox 来完成，但我也使用了变换、翻译.

Positioning can be done with the ViewBox's but I also used transform, translate.

transform: translateY (10px);

希望你觉得这有用，我希望写一个完整的指南，并在我做的时候链接它.谢谢.

Hope you find this useful, I hope to write a complete guide and will link it when I do. Thank you.

这篇关于SVG Spritesheets 在 CSS 中使用 SYMBOL CSS SVG Fragment 作为背景:url 或类似的?如果不是为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！