我如何使用SVG片段并设置背景大小:封面?

问题描述 投票:0回答:1

使用fragments时,SVG图像的尺寸出现问题。当我设置为background-size: cover时,图像不会覆盖容器中的可用空间。

这里是demo

是否可以使用SVG片段,并且能够以适当的行为使用contain中的coverbackground-size

css svg css-sprites
1个回答
0
投票

问题是您没有指定父级SVG的宽度和高度。 Chrome浏览器存在一个错误,该错误要求为片段指定高度和宽度以处理与img相关的CSS技术,但不确定信息的来源是什么,但是CSS Tricks记录了该错误here。我认为高度和宽度仅需要在use标签所在的父级SVG中指定。

您可以在这里看到在sprite.svg中设置svg标签的高度和宽度会在两个版本之间提供统一的行为。

https://codesandbox.io/s/svg-fragment-background-position-problem-i75l3?fontsize=14&hidenavigation=1&theme=dark

© www.soinside.com 2019 - 2024. All rights reserved.