使用SVG实现提示框功能的示例代码
|
M 0 0 从上方简短的路径能看出，我们的尖角路径是完整的整合在整个SVG气泡路径中的，所以就不会担心会出现CSS的 clip-path 方案的问题。 NO.9 可视化工具 方案看起来好像已经搞定了需求中的尖角样式，然而你可能会说这尖角路径是如何产生，难道需要通过强大的数学能力推导出来？如下三次贝塞尔曲线就已经不敢直视了，更何况四次、五次... 所以想配合的我们一定要产出可视化工具来实现这路径生成过程，得益于D3.js工具库操作SVG方面的强大功能，我们开发完的 生成工具地址 (https://market.m.taobao.com/app/fdilab/svg-tool-demo/pages/index/index.html) 如下： 对于熟悉SVG的path命令的同学来说这个操作不难，如果不熟悉的推荐看下下方的参考文章，了解了曲线命令后就能画出圆滑的曲线。 10 总结 至此在ToolTips这块基本已经满足了设计的需求，同时也沉淀了SVG路径生成工具。使用SVG来实现ToolTips能覆盖 CSSclip-path不能完美解决的几个场景。在此特别感谢大漠老师的指导。 11 参考文章 D3官网(https://d3js.org.cn/) 曲线篇: 贝塞尔曲线(https://zhuanlan.zhihu.com/p/136647181 ) Tooltips using SVG Path(https://medium.com/welldone-software/tooltips-using-svg-path-1bd69cc7becd ) SVG渐变(https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients ) 深度掌握SVG路径path的贝塞尔曲线指令(https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/ ) css drop-shadow(https://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/ ) 到此这篇关于使用SVG实现提示框功能的示例代码的文章就介绍到这了,更多相关svg 提示框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ （编辑：西安站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
