长城c30离合器起步发抖是什么原因 长城c30发动机抖动大是什么原因
在之前的几篇文章中，介绍了业界中比较火爆的图片技术SVG(ScalableVectorGraphics),比如Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统,我们可以使用svg来打造精美炫酷的分享小图标(icon)，这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片，这样就可以让网站logo能够变成动态的，作为一名不折腾不舒服斯基，一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲，同时亦能击中我们的虚荣心。
首先第一步，先要将静态图做一步转换,以本站的logo作为例子，原理就是在普通的RGB图像阵列中将其像素进行转码操作，并且输出为svg特有的路径属性，当然了使用python进行图像操作少不了会用到鼎鼎大名的pillow模块
importsysimportosfromPILimportImagedefconvertPixel(r,g,b,a=1):color="#%02X%02X%02X"%(r,g,b)opacity=areturn(color,opacity)forrinsys.argv[1:]:root,ext=os.path.splitext(r)image=Image.open(r)mode=image.modepixels=image.load()width,height=image.sizeprint(image.mode)if"RGB"inmode:output="<svgwidth="%d"height="%d"viewBox="00%d%d"xmlns="http://www.w3.org/2000/svg">"%(width,height,width,height)forrinrange(height):forcinrange(width):color,opacity=convertPixel(*pixels[c,r])output+="<rectx="%d"y="%d"width="1"height="1"fill="%s"fill-opacity="%s"/>"%(c,r,color,opacity)output+="</svg>"withopen(root+".svg","w")asf:f.write(output)
写好脚本，只需要执行该脚本，参数作为图片名称，就可以生成一个同名的svg图片
python3png_to_svg.pylogo.png
需要注意一点，这里有一个坑，在进行像素点矢量转换的时候，图片模式只支持RGB三色模式，以png为例子，如果是全彩的24位图是支持的，但是8位的png图显然无法进行转换，因为它的图片模式是P模式，在这种情况下，使用python脚本对图片进行转换之前，建议用photoshop对图片进行简单的模式转换
OK,我们转换好图片之后，可以用编辑器打开svg格式的图片
<svgversion="1.0"xmlns="http://www.w3.org/2000/svg"width="255.000000pt"height="200.000000pt"viewBox="00255.000000200.000000"preserveAspectRatio="xMidYMidmeet"><gclass="v3u-icon-group"transform="translate(0.000000,200.000000)scale(0.100000,-0.100000)"fill="#2b2b2b"stroke="none"><pathclass="v3u-icon1"d="M15001950c0-27-49-39-175-45-231-10-298-27-374-91-53-44-79-119-65-190l7-353129c3634876211362100-4-13-32-29-69-39-191-170-222-238-55-11910-194193-22338-672-1476-183-48-2010-376-61143-105330-10518102382223893032-1548-132145-10989-157105-23475-10-4-120-811513-216-4216-350-453-3410211410013100-10-712-934-5489103-13173-6733-2669-4780-4735014237179623222647964116065-53147-114179-10856-32658-4364l-25-122320c847338268478-835-2847-164848165-25100-90123-6523-12922-298-3-137-20-208-21-228-1-669739526-3104417216681214321167214304413828-1143-3280-5392-2413-3113-310zm-125-784c39-1745-4016-56-28-15-46-13-729-2319-2419-54023251824617z"/><pathclass="v3u-icon1"d="M13401146c0-145-2610-26601091019011-423-1026-64-10-5-10-19z"/><pathclass="v3u-icon1"d="M45738c-20-50-29-108-16-1088011-4411-140l0-1401280127080140c43778514092140120253639108l733-98-3-98-3-18-65c-10-36-14-66-9-688-3-39-115-54-130-3-3-620-65103456114691213461124613707-3811-11611l-1150-14-32z"/><pathclass="v3u-icon1"d="M626760c-37-12-66-38-82-77-27-64-23-6862-65653776812362323252330-29-21-54-44-54-160-26-7-30-22-9-35-8-3820-3821024-420-20-3-11-9-29-12-40-9-33-26-24-1910l730-850-860-12-53c-21-976-117164-1177701104137184321766985123633345-1463l-21232312c3217474554100543350-2269-2419-4022-12421-530-109-5-125-9z"/><pathclass="v3u-icon1"d="M970746c-22-59-31-109-21-1157-52-37-14-96-29-104-32-157-9-17627-22114-23156-1301638174264-1027-1488-14l8301763c10391264668-139201304114716135212843137-33-475-985-790-95-3-102-17-5-10-24-74-42-143-32-120-44-150-55-139-2313683414521763614234147-24-477-997-900-95-1-104-24z"/><pathclass="v3u-icon1"d="M1705751c-55-25-69-50-110-198-55-200-42-217159-21110931245155273223617575134l627-890-900-11-40c-6-22-15-40-20-40-140-13016112155431983798907-23-9-84l-6-268908902795c15522710227110023-11521-128-1-9-16-11-16-330-3222-13221-184-3z"/><pathclass="v3u-icon1"d="M2101747c-23-60-32-110-22-11614-9-22-139-43-155-11-8-46-102-46-1230-242-393-3l9401241c9311044149-85-8140361436242135-5011-796-76114-76l9701662c10351365868-1382013240150982441337319702069-8865l-79-3-12-47c-7-29-8-48-2-5011-40-58-12-58-50-1221-1548-426-1061-1477l-730-973c-953-972-106-21z"/><pathclass="v3u-icon1"d="M1377473c-3-5-10-27-17-51-6-24-14-50-17-58-4-119-1474-14l7901453c7281558176549-1412-7012-420-78-3-80-7z"/><pathclass="v3u-icon1"d="M1258204c-9-83-4413-381171244144-50-11-3-14-6z"/><pathd="M480130l0-70450c330454451509-915-2515-240-253-2555048-255-2055-180-20-7-20-70z"/><pathd="M600130c0-563-7015-7012015141570056-370-1570-120-15-14-15-70z"/><pathd="M660152c0-6021-9260-9244060236086040-454-1454-110-16-15-18-52-3-45-6-53-23-53-170-208-2353-344-652-2352-160-19-7-19-48z"/><pathd="M834156c14-2526-5626-700-195-2619-261401851420-3116392164142526472650016-273-46-21l-22-28-1328c-716-2027-3227-180-17-37-44z"/><pathd="M970147c0-6119-8763-8741057245786040-454-1454-110-16-15-18-52-3-45-6-53-23-53-170-208-2353-344-652-2352-160-19-7-19-53z"/><pathd="M1120130l0-70550c4205535515011-1115-4015-220-405-401006111025103103427332-416-322811283004144115012-1315-5515l-5500-70z"/><pathd="M1330185c-23-28-4-5655-797-27-70-14-8-8-18-7-383-2513-2912-34-1-8-2114-3458-3466080532179-4018-4236-32820-431-23481126-7136-9310z"/><pathd="M1520130l0-70490c30053561151316555-1355-80-8311216161523-442-99-3216-5516l-3900-70zm7030c0-5-9-10-20-10-110-205-201006910201011020-420-10zm8-62c-7-20-48-23-48-4011916261616024-522-12z"/><pathd="M1660130l0-70510c3604944713-36-1713-3115-263-276-2758047-254-2054-180-20-7-20-70z"/><pathd="M1791174c-12-15-21-34-21-440-109-2921-4441-52129-2312944067-8896-12944zm89-24c22-40-26-80-58-48-2525-66830689022-928-20z"/><pathd="M1970180c-43-43-11-12049-1204906196146030-334-2534-160-25-6-25-150-85-1510-156010-410-100-5-11-10-25-10-320-5032-34619171720451636-65693324-2516-7810-99-11z"/></g></svg>
可以看到一个复杂的png位图已经被我们分解成为了n个path路径，这些路径可以被随意的加上选择器，根据选择器我们就可以动态的为其加上炫酷的动画。
有的人说了，我不懂python，有没有别的方法进行图片转换，答案是可以的，比如adobe旗下的Illustrator可以做手动勾勒一个图片的路径，然后进行转换，还有一个在线转换平台：convertio.co,也可以做类似的操作。
图片处理好之后，我们就可以发挥想象力给logo加上喜欢的动画了，郭富城怎么唱的来着？动起来~~动起来~~
这里值得一提的是，svg的path标签完全支持css3的transform动画，二者结合起来简直天衣无缝
利用transform属性可以做一些小特效，比如我想让logo悬停的时候改变颜色，并且发生纵向位移
.v3u-icon-group{pointer-events:fill;}.v3u-icon1{transition:600msall;}.v3u-icon-group:hover.v3u-icon1{transform:translateY(-100px);fill:#4099ff;}
效果是这样的：
有没有很炫酷的感觉，亦或者，你想让它变瘦一点
.v3u-icon-group{pointer-events:fill;}.v3u-icon1{transition:600msall;}.v3u-icon-group:hover.v3u-icon1{transform:rotateY(80deg);fill:#4099ff;}
或者干脆想翻个跟头
.v3u-icon-group{pointer-events:fill;}.v3u-icon1{transition:600msall;}.v3u-icon-group:hover.v3u-icon1{fill:#4099ff;transform:rotate(45deg);}
当然了，这些都是相对简单的动画，更加有意思的特效还需要进行组合和设计，这里只是抛砖引玉，值得一提的是，我们用到了一个很有意思的属性：pointer-events
pointer-events是CSS和SVG同时都具有的属性。它的初始值是auto，效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。在SVG2.0标准文档中新添加了pointer-events的值为bounding-box这个属性，当它的值为bounding-box时，在围绕元素的矩形区域也能接收定义好的事件交互，不过浏览器支持还不是很好，到目前为止还只有chrome65以上才支持。当pointer-events的值为none，即表示元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的，说白了，就是防止悬停元素触发动画时，在执行动画运动过程中二次触发，导致“抖动”的情况。
结语：使用python3结合svg，可以让你的网站更加生动有趣，现在浏览器对SVG支持的越来越好，可以放心大胆的使用pointer-events，也可以很好的改善SVG的交互体验。
