css - svg 旋转 90 度但消失

Question

我有一个 svg，它是一个向右的箭头。但是，我无法通过添加变换来使箭头向下：旋转（）。当我更改 css svg 路径时，整个箭头都消失了。我该如何解决？

前：

后：

在我的 html 和 css 中，

svg path {
transform: rotate(90);
}

<svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
 <g id="ico___black" data-name="ico_&gt;_black" transform="translate(19525 16160)">
   <path id="パス_60" data-name="パス 60" d="M1061.961,192.633l5.465,5.465,5.465-5.465"
     transform="translate(-19707.389 -15080.434) rotate(-90)" fill="none" stroke="#2b2525"
     stroke-width="2" />
   <rect id="長方形_124" data-name="長方形 124" width="25" height="25" transform="translate(-19525 -16160)" 
     fill="none" />
 </g>
</svg>

标签： csssvg

Answer 1

您可以在 svg 而不是路径上应用转换。

svg {    
  transform: rotate(90);
}