原文转载自「刘悦的技术博客」https://v3u.cn/a_id_148
在之前的几篇文章中，介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统,我们可以使用svg来打造精美炫酷的分享小图标(icon)，这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片，这样就可以让网站logo能够变成动态的，作为一名不折腾不舒服斯基，一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲，同时亦能击中我们的虚荣心。
首先第一步，先要将静态图做一步转换,以本站的logo作为例子，原理就是在普通的RGB图像阵列中将其像素进行转码操作，并且输出为svg特有的路径属性，当然了使用python进行图像操作少不了会用到鼎鼎大名的pillow模块
import sys
import os
from PIL import Image
def convertPixel(r, g, b, a=1):
color = "#%02X%02X%02X" % (r, g, b)
opacity = a
return (color, opacity)
for r in sys.argv[1:]:
root, ext = os.path.splitext(r)
image = Image.open(r)
mode = image.mode
pixels = image.load()
width, height = image.size
print(image.mode)
if "RGB" in mode:
output = "
for r in range(height):
for c in range(width):
color, opacity = convertPixel(*pixels[c, r])
output += "
output += ""
with open(root + ".svg", "w") as f:
f.write(output)
写好脚本，只需要执行该脚本，参数作为图片名称，就可以生成一个同名的svg图片
python3 png_to_svg.py logo.png
需要注意一点，这里有一个坑，在进行像素点矢量转换的时候，图片模式只支持RGB三色模式，以png为例子，如果是全彩的24位图是支持的，但是8位的png图显然无法进行转换，因为它的图片模式是P模式，在这种情况下，使用python脚本对图片进行转换之前，建议用photoshop对图片进行简单的模式转换
OK,我们转换好图片之后，可以用编辑器打开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: 600ms all;
}
.v3u-icon-group:hover .v3u-icon1 {
transform:translateY(-100px);
fill: #4099ff;
}
效果是这样的：
有没有很炫酷的感觉，亦或者，你想让它变瘦一点
.v3u-icon-group{
pointer-events: fill;
}
.v3u-icon1 {
transition: 600ms all;
}
.v3u-icon-group:hover .v3u-icon1 {
transform: rotateY(80deg);
fill: #4099ff;
}
或者干脆想翻个跟头
.v3u-icon-group{
pointer-events: fill;
}
.v3u-icon1 {
transition: 600ms all;
}
.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的交互体验。
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_148
参考链接
发表评论