寒冬残荷 发表于 2021-9-25 20:53

音画-《水墨江南》（SVG练习）


<div style="position:relative;width:1200px;height:1100px; top: 0px;left: -100px; ">
<iframe src="http://tanglianhua.3vcm.vip/yinhua/smjn.html" scrolling="no" frameborder="0" style="width:1200px;height:1050px; ">
</iframe>
</div>

西椅子胡同 发表于 2021-9-26 05:22

精美画卷，精心制作，赞！

195400 发表于 2021-9-26 07:10

这画片精致好看，赞！
<script type="text/javascript">
var doctxt = "%3Cstyle%20type%3D%22text/css%22%3E%0A.blk%20%20%20%7Bfill%3Atransparent%3Bstroke%3Argb%28128%2C%20177%2C%2053%29%3Bstroke-width%3A1%3B%7D%0A%3C/style%3E%0A%0A%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%20700%20500%22%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4sRDQf.jpg%22%20width%3D%22700%22%20height%3D%22500%22%20opacity%3D%271%27%20x%3D%220%22%20y%3D%220%22%20%0ApreserveAspectRatio%3D%22none%22%20%3E%0A%3Canimate%20id%3D%27p0%27%20attributename%3D%22x%22%20from%3D%220%22%20to%3D%22-700%22%20begin%3D%220%3Bp3.end%22%20dur%3D%227s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22x%22%20to%3D%270%27%20begin%3D%27p0.end%27%3E%3C/set%3E%20%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4r8o80.jpg%22%20width%3D%227884%22%20height%3D%22500%22%20x%3D%22700%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%27p1%27%20attributename%3D%22x%22%20from%3D%22700%22%20to%3D%22-7884%22%20begin%3D%22p0.begin%22%20dur%3D%2285.84%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22x%22%20to%3D%27700%27%20begin%3D%27p1.end%27%3E%3C/set%3E%20%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4r8hUs.jpg%22%20width%3D%227882%22%20height%3D%22500%22%20x%3D%22700%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%27p2%27%20attributename%3D%22x%22%20from%3D%22700%22%20to%3D%22-7882%22%20begin%3D%22p1.end-7%22%20dur%3D%2285.82%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22x%22%20to%3D%27700%27%20begin%3D%27p2.end%27%3E%3C/set%3E%20%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4sRDQf.jpg%22%20width%3D%22700%22%20height%3D%22500%22%20opacity%3D%271%27%20x%3D%22700%22%20y%3D%220%22%20%0ApreserveAspectRatio%3D%22none%22%20%3E%0A%3Canimate%20id%3D%27p3%27%20attributename%3D%22x%22%20from%3D%22700%22%20to%3D%220%22%20begin%3D%22p2.end-7%22%20dur%3D%227s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributename%3D%22x%22%20to%3D%27700%27%20begin%3D%27p3.end%27%3E%3C/set%3E%20%0A%3C/image%3E%0A%0A%3Ctext%20x%3D%22250%22%20y%3D%22450%22%20style%3D%22fill%3Apink%3B%20opacity%3A1%3Bfont-size%3A26px%3B%22%3E%u7D20%u6750%uFF1A%u7F51%u7EDC%u3000%u3000%u5236%u4F5C%uFF1A%u5BD2%u51AC%u6B8B%u8377%3C/text%3E%0A%0A%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%22100%25%22%20height%3D%22100%25%22%20class%3D%22blk%22%20style%3D%22stroke-width%3A5%22/%3E%0A%0A%0A%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%2715%27%20y%3D%270%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%2730%27%20y%3D%270%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%270%27%20y%3D%2715%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%2715%27%20y%3D%2715%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%270%27%20y%3D%2730%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%0A%3Crect%20x%3D%27655%27%20y%3D%270%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27670%27%20y%3D%270%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27685%27%20y%3D%270%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27670%27%20y%3D%2715%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27685%27%20y%3D%2715%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27685%27%20y%3D%2730%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%0A%3Crect%20x%3D%270%27%20y%3D%27485%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%2715%27%20y%3D%27485%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%2730%27%20y%3D%27485%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%270%27%20y%3D%27470%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%2715%27%20y%3D%27470%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%270%27%20y%3D%27455%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%0A%3Crect%20x%3D%27655%27%20y%3D%27485%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27670%27%20y%3D%27485%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27685%27%20y%3D%27485%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27670%27%20y%3D%27470%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27685%27%20y%3D%27470%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3Crect%20x%3D%27685%27%20y%3D%27455%27%20width%3D%2215%22%20height%3D%2215%22%20class%3D%22blk%22%20/%3E%0A%3C/svg%3E";
//var blk = document.querySelector('#blkx');

//blk.innerHTML = unescape(doctxt);
document.write(unescape(doctxt));
</script>
轻灵画面，厚重的图框

静竹. 发表于 2021-9-26 10:23

精美画卷，欣赏点赞！

寒冬残荷 发表于 2021-9-27 10:12

西椅子胡同 发表于 2021-9-26 05:22
精美画卷，精心制作，赞！

感谢光临！感谢您的支持与鼓励！

寒冬残荷 发表于 2021-9-27 10:12

静竹. 发表于 2021-9-26 10:23
精美画卷，欣赏点赞！

感谢光临！感谢您的支持与鼓励！

寒冬残荷 发表于 2021-9-27 10:15

195400 发表于 2021-9-26 07:10
这画片精致好看，赞！

var doctxt = "%3Cstyle%20type%3D%22text/css%22%3E%0A.blk%20%20%20%7Bfill%3At ...

谢谢老师的指点！我那是把一幅山水画放在金属画框中之意。:lol

195400 发表于 2021-9-27 12:23

<script type="text/javascript">
document.write(unescape("%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%201150%20900%22%3E%0A%3Cimage%20i%3D%27g0%27%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4sucUx.png%22%20width%3D%221150%22%20height%3D%22900%22%20opacity%3D%221%22%20x%3D%220%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%3C/image%3E%0A%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20viewBox%3D%220%200%20700%20500%22%20width%3D%22700%22%20height%3D%22500%22%20x%3D%22225%22%20y%3D%22215%22%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4sRDQf.jpg%22%20width%3D%22700%22%20height%3D%22500%22%20opacity%3D%221%22%20x%3D%220%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22p0%22%20attributeName%3D%22x%22%20from%3D%220%22%20to%3D%22-700%22%20begin%3D%220%3Bp3.end%22%20dur%3D%227s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4r8o80.jpg%22%20width%3D%227884%22%20height%3D%22500%22%20x%3D%22700%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22p1%22%20attributeName%3D%22x%22%20from%3D%22700%22%20to%3D%22-7884%22%20begin%3D%22p0.end-7%22%20dur%3D%2285.84%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4r8hUs.jpg%22%20width%3D%227882%22%20height%3D%22500%22%20x%3D%22700%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22p2%22%20attributeName%3D%22x%22%20from%3D%22700%22%20to%3D%22-7882%22%20begin%3D%22p1.end-7%22%20dur%3D%2285.82%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3C/image%3E%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/25/4sRDQf.jpg%22%20width%3D%22700%22%20height%3D%22500%22%20opacity%3D%221%22%20x%3D%22700%22%20y%3D%220%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Canimate%20id%3D%22p3%22%20attributeName%3D%22x%22%20from%3D%22700%22%20to%3D%220%22%20begin%3D%22p2.end-7%22%20dur%3D%227s%22%20fill%3D%22freeze%22%3E%3C/animate%3E%0A%3Cset%20attributeName%3D%22x%22%20to%3D%22700%22%20begin%3D%22p3.end%22%3E%3C/set%3E%20%0A%3C/image%3E%0A%3Ctext%20x%3D%22250%22%20y%3D%22450%22%20style%3D%22fill%3Apink%3B%20opacity%3A1%3Bfont-size%3A26px%3B%22%3E%u7D20%u6750%uFF1A%u7F51%u7EDC%u3000%u3000%u5236%u4F5C%uFF1A%u5BD2%u51AC%u6B8B%u8377%3C/text%3E%0A%3C/svg%3E%0A%3C/svg%3E"));
</script>

寒冬残荷 发表于 2021-9-27 12:31

195400 发表于 2021-9-27 12:23
document.write(unescape("%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22 ...

老师回复的什么看不到。看代码是：
<script type="text/javascript">
document.write(unescape(""));
</script>

195400 发表于 2021-9-27 12:49

寒冬残荷 发表于 2021-9-27 12:31
老师回复的什么看不到。看代码是：

document.write(unescape(""));

现在应该有了吧。

做试验，不用div等标签，近乎纯SVG。
页: [1] 2
查看完整版本: 音画-《水墨江南》（SVG练习）