音画：《莲的心事》——学习SVG标签练习

寒冬残荷

寒冬残荷

发了好几次才发得出来，直接用代码没有一次成功的，网站总是把代码中的图片地址去掉。用iframe标签出不得，我还以为我被禁言了呢。

寒冬残荷

昨天学习svg标签知识，今天上网下载图片来用美图秀秀编辑后上传图床。可谓学习很用功哦！以前小时候读书有这么用功就好了！

195400

寒冬残荷

195400 发表于 2021-8-24 08:57

谢谢老师，封面我是用一张图片作背景，上面加文字。所以，代码还是用我原来的顺序：


<image xlink: style="width:1024px;height:768px; opacity:1; " x="0px" y="0px">
<animate id="fpicx" attributename="opacity" from="1" to="0.9" begin="0s" dur="10s" fill="freeze" restart="1"  />
<animate attributename="opacity" from="0.9" to="1" begin="fpicx.begin+10s" dur="3s" fill="freeze" />
<animate id="lpicx" attributename="opacity" from="1" to="0" begin="fpicx.begin+12s" dur="2s" fill="freeze" />
</image>
<text  x="0" y="0" style="fill:#ff0000;opacity:1;line-height:180%;font:bold 50pt 楷体">
<tspan x="300" y="110">请您欣赏音乐</tspan>
<tspan x="100" y="280" style="fill:#008800; line-height:180%;font:bold 100pt 黑体">《莲的心事》</tspan>
<tspan x="250" y="450" style="fill:#ff00ff; line-height:180%;font:bold 26pt 宋体">图/网络下载编辑　制作/寒冬残荷</tspan>
<animate attributename="opacity" from="1" to="0" begin="0s" dur="15s" fill="freeze" />
</text>

透明度也改了。

寒冬残荷

195400 发表于 2021-8-24 08:57

原来我也想设置svg盒子的宽度大一点，但我不喜欢缩放时看到背景色，这样就没有了录像视频的感觉了。当然，大框基本能看到全图。

寒冬残荷

昨天最大的收获（好有成就感）就是制作这个作品。从上网找图片下载来修剪，花了很多时间。能找到这么漂亮的莲花图，我好兴奋！我一直很喜欢莲花，也很喜欢这首歌，曾制作过MV，但用的图片没有这个漂亮、高清……

195400

寒冬残荷 发表于 2021-8-24 10:05
谢谢老师，封面我是用一张图片作背景，上面加文字。所以，代码还是用我原来的顺序：

代码顺序似乎无所谓只要时间顺序对就行。

现在每张图片动画开始都是前一张结束前的一秒，这样是不是衔接的好些。

195400

寒冬残荷 发表于 2021-8-24 10:17
昨天最大的收获（好有成就感）就是制作这个作品。从上网找图片下载来修剪，花了很多时间。能找到这么漂亮的 ...

不会修图、绘图等，只能“挂眼科看”

195400

寒冬残荷 发表于 2021-8-24 10:11
原来我也想设置svg盒子的宽度大一点，但我不喜欢缩放时看到背景色，这样就没有了录像视频的感觉了。当然 ...

注意第二和第七张图片，它们就是由2048x1536 到 1024x768 然后还原，搞清楚视窗和图片尺寸之间的关系就不会露处背景了。
哦，用的还是你原来的代码，那就没什么差别了。