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

假设我有一些简单的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%;
    }
}

.myclass{
宽度：22px；
高度：22px；
&：悬停{
背景：rgba（0,0,0,1）；
//如何将背景大小设置为大于元素大小
边界半径：50%；
}
}

是否有任何本地（非黑客）CSS方法可以应用元素本身的较大背景颜色大小+应用边框半径？比方说，我希望背景显示为36px；盒子阴影没有帮助。背景尺寸也一样。 当然，我知道如何使用包装器元素，但mby我不需要它？只要把你的图标和应用背景，因为你想

---

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

---

或者，如果您想将背景色应用于图标，您可以使用absolut hight/width并将图标与display属性（例如flex）对齐。

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

编辑Svg本身

添加包装器以控制Svg在其上的位置

---

请添加一些代码或代码片段。为了更好地了解你需要什么以及发生了什么…\n我想你只需要填充。您可能需要设置

框大小：内容框取决于您是否使用设置该值的框架。