SVG图标修改图标方向，镜像旋转和颜色等

chenhuakang

已于 2023-01-20 15:30:49 修改

阅读量5.1k

点赞数 3

分类专栏： UI设计文章标签： android 开源音视频

于 2022-12-27 11:26:50 首次发布

本文链接：https://blog.csdn.net/chenhuakang/article/details/98868042

版权

UI设计专栏收录该内容

4 篇文章

订阅专栏

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512">
<title>Arrow Back</title>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="48" 
d="M244 400L100 256l144-144M120 256h292"/></svg>

增加旋转角度 style="transform: rotate(90deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotate(90deg)">
<title>Arrow Back</title>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="48" 
d="M244 400L100 256l144-144M120 256h292"/></svg>

任意角度都可以修改

svg修改颜色值

设置颜色值代码 style="stroke:#660000; fill:none;"

<svg xmlns="http://www.w3.org/2000/svg"
 class="ionicon" 
viewBox="0 0 512 512">
<title>Arrow Back</title>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="48" 
d="M244 400L100 256l144-144M120 256h292" 
style="stroke:#660000; 
fill:none;"/></svg>

以下为镜像翻转

原图

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor"
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" 
d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

水平镜像翻转后 style="transform: rotateY(180deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotateY(180deg)">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

上下镜像翻转后 style="transform: rotateX(180deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotateX(180deg)">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" 
d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

水平上下同事镜像翻转 style="transform: rotateX(180deg) rotateY(180deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotateX(180deg) rotateY(180deg)">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>