写在前面
- 一些网站可以在线生成LOGO,并支持编辑,效果还不错,但是保存和下载需要注册、登录和收费。
- 如果希望获取LOGO,并且确保自己不会用于商用的话,这个插件也许能帮到你!
- 如果对你有帮助,还请给个⭐️,欢迎fork~
插件下载
思路分析
- 简述一些这两个在线LOGO设计网站的操作思路:
- 去除登录框。有的LOGO设计网站在编辑之前必须登录,不登陆不给编辑。针对这种情况,我们使用浏览器开发者工具定位登录框所在的代码位置,将相应的代码删除或者设置样式
display:none
即可。 - LOGO上面有遮罩。我们知道,其实在线设计LOGO就是应用的SVG,因此我们希望通过LOGO的位置定位SVG代码所在位置,但是大部分网站定位后却是一个DIV标签。对于这种情况,我们只需要把对应位置的DIV元素删掉,再次定位,基本上就可以看到真正的SVG代码所在的位置了。
- 开发者工具中对SVG做修改无实时效果。其实是因为网站在LOGO上面加了一层当前logo的“副本”,导致你用代码修改svg的时候,真实的svg其实已经有变化了,但是由于上面盖了一层初始的副本,导致你认为根本没有变化而已。
- 获取不到节点。一般来说,我们不去直接获取svg,而且先获取其父元素。但是有的父元素节点根本获取不到,仔细观察,发现父元素的某一个祖先元素竟然是自定义的标签,所以用class名获取不到该自定义标签元素,自然也获取不到下面的子元素了。此时可以使用
document.getElementsByTagName()
的方式来获取自定义标签的元素了。 - svg在shadow root里面。也就是说SVG是通过创建Shadow DOM的方式加载上去的。此时我们不能使用常规的
parentNode.children[0]
这种方式由父节点获取子节点了,而是需要多一步获取shadow root的操作,即parentNode.shadowroot.children[0]
。 - 怎么修改svg尺寸呢。其实很简单,修改svg的width属性和height属性就可以了。不过要注意width和height的比例要正确,否则会导致logo变形。
- 去除登录框。有的LOGO设计网站在编辑之前必须登录,不登陆不给编辑。针对这种情况,我们使用浏览器开发者工具定位登录框所在的代码位置,将相应的代码删除或者设置样式
思路拓展
- 做成插件。项目见上述下载地址。