Question

假设我有一些简单的SVG图标：

<svg class="myclass">
    <use href="#my-icon"/>
</svg>

.myclass {
    width: 22px;
    height: 22px;
    &:hover {
        background: rgba(0,0,0,.1);
        // HOW TO SET BACKGROUND SIZE LARGER THAN ELEMENT SIZE
        border-radius: 50%;
    }
}

是否有任何原生（非hacky）CSS方式可以应用元素本身+施加边框半径的更大背景色？假设我希望背景看起来是36px；盒子阴影无济于事。以及背景大小。当然，我知道如何使用wrapper元素执行此操作，但是mby我不需要它吗？只需放置图标并根据需要应用背景...？

更新：Codepen setup的附录

Answer 1

您的问题是您试图将Svg作为普通的html元素进行操作，但事实并非如此。 Svg中包含的所有内容都是其中的一部分，因此您有2个选择：

编辑Svg本身。
添加一个包装器以控制Svg在其上的位置。

Answer 2

我认为添加padding属性可以解决您的问题。

或者，如果您想将背景颜色应用于图标，则可以使用绝对高/宽并将图标与显示属性（例如flex）对齐

如何在没有包装元素的情况下将背景尺寸设置为大于元素本身

2 个答案: