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

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%;
}
}

是否有任何本机(不是黑客(CSS方法来应用元素本身+应用边框半径的较大背景颜色大小？假设我希望背景显示为 36px;盒子阴影无济于事。背景大小也是如此。 当然，我知道如何使用包装元素执行此操作，但是我不需要它吗？只需放置您的图标并根据需要应用背景...？

更新：代码笔设置附录

Answer 1

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

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

Answer 2

我认为添加填充属性将解决您的问题。

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