昨晚看了用svg如何制作富有动态的tooltip，于是今天就心血来潮学着做一下，于是也成功做出来，也明白其中的原理，收获颇多阿！接下来要多去学习svg，这是个好东西。
这其中也注意了一些平时纠结的细节应该怎么去做，比如：
<article> <section id="sound1"> </section> <section id="sound2"> </section> </article>
article标签长度为600px,section 分别是300px，然后设置其为display:inline-block;然后是下面的效果：
本来按常理来说的话，应该是头像水平排列，这是因为display:inline-block;会将article标签和section标签之间空白渲染成空格，空格展位，所以会导致图片不在同一排，解决的办法是给article标签和section标签添加如下的css代码：
article{
width:600px;
margin:200px;
font-size:0;
}
article section{
display:inline-block;
width:300px;
font-size:14px;
position:relative;
}
于是空白去掉了！
另外对于svg的web图像，我们可以对其进行修改，使其图像的样式可进行修改，它的格式大概如下（举一例子）：
<"1.0" encoding="utf-8""-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="300px" viewBox="0 0 600 300" enable-background="new 0 0 600 300" xml:space="preserve"> <polygon points="89.571,6.648 513.333,6.648 590.25,75.342 553.002,215.306 313.065,273.358 300,293.352 288.876,272.71 48.936,215.306 9.75,75.342 "/> </svg>
于是我们不可能将其引入到html文件里面，如果说有很多这种svg图像，修改起来很麻烦！
于是使用的是ajax来加载这个图片：
html的dom：<svg data-src="/UploadFiles/2021-04-02/bubble1.svg">
// 问题二：对于svg图像我们要如何引入，不可能将整个svg都引入吧，不便于修改编辑
// 技巧二：使用js进行加载
$('svg[data-src]').each(function(index, svg) {
var src = $(svg).data('src'); //data用于获取data-*属性的路径
$.ajax({
url: src,
dataType: 'xml',
success: function(content) {
var doc = content.documentElement;
$(doc).attr({
width: $(svg).attr('width'),
height: $(svg).attr('height')
});
$(svg).after(doc).remove();
}
})
});
还有对于图片的描边动画效果，这里又怎么个好的方法，只针对svg图像：
使用stroke-dasharray（虚线描边，可以不断尝试，使其调至适应大小，完成实现整个描边的效果）stroke-dashoffset（虚线间隔，调至整个svg没有描边的效果），然后使用transition实现这个动画
最终效果（如图，没有在线演示，动画效果出不来，不过下面贴的代码直接复制，再去下载两个svg图片和头像就可以使用）
代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>toolTip聊天对话框制作</title> <meta charset="utf-8"/> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">以上所述就是本文的全部内容了，希望大家能够喜欢。
svg,tooltip
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com