诺北 发表于 2021-8-24 20:11

195400 发表于 2021-8-24 13:14
非常感谢诺北管理员光临支持和鼓励!祝好!

不用谢,是你的钻研努力让人佩服

达人笑看红尘 发表于 2021-8-25 21:56


淡入淡出
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:800px;height:600px;">
<image xlink:href="https://z3.ax1x.com/2021/06/29/RakR2t.jpg" style="width:800px;height:600px; opacity:0;" x="0px" y="0px">
<animate id="fpic0" attributename="opacity" from="0" to="1" begin="0s; lpic0.end+2s" dur="5s" fill="freeze"/>
<animate id="lpic0" attributename="opacity" from="1" to="0" begin="fpic0.begin+5s" dur="5s" fill="freeze" />
</image>
<svg>
缩小/放大
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:800px;height:600px;">
<image xlink:href="https://z3.ax1x.com/2021/06/29/Rak28I.jpg" style="width:1600px;height:1200px; " x="-400px" y="-300px">
<animate id="fpic3" attributename="x" from="-400" to="0" begin="0s; lpic3.end+2s" dur="5s" fill="freeze"/>
<animate attributename="y" from="-300" to="0" begin="fpic3.begin" dur="5s" fill="freeze" />
<animate attributename="width" from="1600" to="800" begin="fpic3.begin" dur="5s" fill="freeze"/>
<animate attributename="height" from="1200" to="600" begin="fpic3.begin" dur="5s" fill="freeze" />
<animate attributename="x" from="0" to="-400" begin="fpic3.begin+7s" dur="5s" fill="freeze"/>
<animate attributename="y" from="0" to="-300" begin="fpic3.begin+7s" dur="5s" fill="freeze" />
<animate attributename="width" from="800" to="1600" begin="fpic3.begin+7s" dur="5s" fill="freeze"/>
<animate id="lpic3" attributename="height" from="600" to="1200" begin="fpic3.begin+7s" dur="5s" fill="freeze" />
</image>
</svg>
水平移动
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:800px;height:600px;">
<image xlink:href="https://z3.ax1x.com/2021/06/29/RakgPA.jpg" style="width:1600px;height:1200px; " x="0px" y="0px">
<animate id="fpic1" attributename="x" from="0" to="-800" begin="0s; lpic1.end+2s" dur="5s" fill="freeze" />
<animate id="lpic1" attributename="x" from="-800" to="0" begin="fpic1.begin+5s" dur="5s" fill="freeze" />
</image>
</svg>
垂直移动
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="margin-top:12px;width:800px;height:600px;">
<image xlink:href="https://z3.ax1x.com/2021/06/29/RakY59.jpg" style="width:1600px;height:1200px; " x="0px" y="0px">
<animate id="fpic2" attributename="y" from="0" to="-600" begin="0s; lpic2.end+2s" dur="5s" fill="freeze" />
<animate id="lpic2" attributename="y" from="-600" to="0" begin="fpic2.begin+5s" dur="5s" fill="freeze" />
</image>
</svg>

本主题由 雄鹰翱翔 于 2021-8-22 07:08 限时置顶
页: 1 [2]
查看完整版本: SVG 学习笔记