这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
前言
因为时间紧迫，没有时间做icon组件，但是在做样式的时候排版svg遇到了很多问题，比如：
- 怎样将一个svg放到自己想要的位置并保持组件复用性？
- 没有自己的icon组件库，怎样对一个svg图形更改颜色？
- 不能直接指定颜色，怎样设置不同状态下svg的颜色？
下面分享一些奇技淫巧。
问题详解
怎样将一个svg放到自己想要的位置并保持组件复用性？
原理
position属性
-
absolute -
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
如果想要把search元素放到input的框里，首先要明确search元素最近的祖先元素是哪个，当然啦，不可能是input。
应用
我input组件的结构如下伪代码
.my-input{
&-inner{
input{
width:100%;
}
&-search-box{ //div
img{
src="search.svg" //伪代码，各位意会
}
}
可以看到search-box 和 input 同在 .my-input-inner下 ，所以只要设置input的width 为100%，my-input-inner的postion为relative或其他的非static属性，即可类似地视input（实际上是my-input-inner)为当设置-search-box的position为absolute时的参照系
.my-input{
&-inner{
position:relative;
input{
width:100%;
}
&-search-box{ //div
position:absolute;
top:25%;
right:10px; //10px是图标的宽度+padding宽度
img{
src="search.svg" //伪代码，各位意会
}
}
right:10px是指 对于 .my-input-inner来讲，与其最右侧相隔10px，也就是容器最右端向左10px。
top:25%是为了给input设定高度大小留足弹性，保证其能够水平居中
没有自己的icon组件库，怎样对一个图形更改颜色？
png格式
filter:hue-rotate(90deg)
但它对于
svg格式
直接改svg文件的attr(fill)应该是不可以的，反正我是没成功过，
filter:brightness(500%)
不能直接指定颜色，怎样设置不同状态下svg的颜色？
调整亮度不同，会有不同的颜色
.your-svg-class{
//...
&:focus,&:hover {
filter:brightness(680%);
}
&:active{
filter:brightness(500%);
}
}
最后的拾人牙慧（嗯，凑字数狂魔狂喜）
最近原创更文的阅读量稳步下跌，思前想后，夜里辗转反侧。
我有个不成熟的请求。
单身这么久了，好久没人叫我老公了。
大家可以在评论区里，叫我一声老公吗？
我这么善良质朴的愿望，能被满足吗？
如果实在叫不出口的话，能帮我点下关注和左侧的点赞+在看吗？
别说了，一起在知识的海洋里呛水吧
看这个拾人牙慧是不是尽得精髓（🤦♀️）
