一个插件帮你快速、免费下载两个网站的高清无水印LOGO！

写在前面

• 一些网站可以在线生成LOGO，并支持编辑，效果还不错，但是保存和下载需要注册、登录和收费。
• 如果希望获取LOGO，并且确保自己不会用于商用的话，这个插件也许能帮到你！
• 如果对你有帮助，还请给个⭐️，欢迎fork~

插件下载

• GitHub
• Gitee镜像
• 作者GitHub主页还有很多有趣好玩的项目~

思路分析

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

思路拓展

• 做成插件。项目见上述下载地址。