使用css旋转svg会导致在svg上显示灰色背景

使用CSS旋转SVG会导致在SVG上显示灰色背景的原因是，SVG元素在旋转时会默认使用CSS的transform属性进行变换，而这个变换会导致SVG元素的背景色变为灰色。

要解决这个问题，可以通过以下两种方法来实现旋转SVG而不显示灰色背景：

1. 使用SVG的transform属性：可以直接在SVG元素上使用transform属性来实现旋转，而不使用CSS的transform属性。例如，要将SVG元素顺时针旋转45度，可以在SVG元素上添加transform="rotate(45)"属性。
2. 使用CSS的transform-origin属性：可以通过设置transform-origin属性来改变旋转的原点，从而避免出现灰色背景。默认情况下，transform-origin属性的值为50% 50%，即元素的中心点。可以将transform-origin属性的值设置为SVG元素的左上角，即transform-origin: 0 0;，这样旋转时就不会出现灰色背景。

需要注意的是，以上两种方法都是通过直接操作SVG元素来实现旋转，而不使用CSS的transform属性。这样可以避免使用CSS旋转时出现的灰色背景问题。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供了弹性、可靠、安全的云服务器，可满足各种计算需求。详情请参考：腾讯云云服务器（CVM）产品介绍
• 腾讯云对象存储（COS）：提供了高可靠、低成本的对象存储服务，可用于存储和管理各种类型的数据。详情请参考：腾讯云对象存储（COS）产品介绍