概览

需求是生成一个竖线来将页面中的不同项目隔离开来,但是使用字符 | 与中文字符不太对齐,所以想到用 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° 都行,以及反转。

分类: 前端开发

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。