如何将SVG图片旋转90度，使用CSS transform属性不生效该如何解决

方案1：针对内联SVG（直接在HTML中写

你之前的代码失效主要有两个可能原因：一是旋转角度写的是60deg不符合你要的90度需求，二是未正确设置旋转基准点或SVG缺少viewBox属性。
修正后的CSS代码如下：

svg {
  transform: rotate(90deg);
  /* 固定以SVG中心为旋转基准，默认值可不写，出现偏移时再加调整 */
  transform-origin: 50% 50%;
}

如果旋转后出现显示裁切、偏移问题，检查

<svg viewBox="0 0 你的SVG宽度 你的SVG高度" ...其他属性>

你也可以直接修改SVG根标签的属性实现旋转，无需额外CSS：

<svg transform="rotate(90)" viewBox="0 0 宽度 高度" ...其他属性>

方案2：针对**标签引入的外部SVG文件** #

如果你的SVG是通过<img src="xxx.svg">的方式引入页面，给svg选择器加样式不会生效，需要选中对应的img标签设置样式：

/* 给对应的img加类名svg-img，或按你自己的页面选择器规则匹配 */
.svg-img {
  transform: rotate(90deg);
}

内容的提问来源于stack exchange，提问作者user16902936