SVG 图形旋转设置

概览

需求是生成一个竖线来将页面中的不同项目隔离开来，但是使用字符 | 与中文字符不太对齐，所以想到用 svg 来代替，但是找到的只有横行的 —，遂就将这个 — 旋转来实现需求。

实现

图形 SVG 图形 -

<svg xmlns='http://www.w3.org/2000/svg' transform:rotate(60deg) width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 18 18'>
  <path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/>
</svg>

class='bi bi-dash' 当前 svg 图形的类名

设置 CSS 样式为旋转 90°

svg.bi.bi-dash {
    transform: rotate(90deg);
}

图形旋转后变成 |

思路

通过这个需求的实现过程，我们可以在其他的 svg 图形中变化更多个性化的图形样式需求，如旋转 30° 60° 都行，以及反转。