var lxtxt =[">lmth/
http://www.yinhuabbs.cn/data/attachment/forum/201912/20/123059ffon6y9p6tnedvne.gif 今天函授的这一课主要内容是svg的<g>元素的使用。:lol
老师，这里为什么还要用svg的矩形元素<rect>
眼睛痛，几天来上来都只是看一眼就下线了。 为了边框？，我的浏览器没看到有描边。 反复看了代码，还是觉得矩形元素在这里没起作用，学生迟钝，请老师指点。:lol 寒冬残荷 发表于 2021-9-10 22:24
今天函授的这一课主要内容是svg的元素的使用。
老师，这里为什么还要用svg的矩形元素
这算是个遮丑的吧:L
为了计算方便所有图片的起点都在1000（x=1000 或 y=1000), 这样启动时viewbox就是个空白不好看，所以加了个固定的矩形放在那里。:lol
又琢磨了下，用的旋转方法太繁琐了，还是《西椅子胡同》用的转换直观简单明了。 寒冬残荷 发表于 2021-9-10 22:28
为了边框？，我的浏览器没看到有描边。
那些花哨我还嫌麻烦，没装饰:L
<div id="blkx1" style="position:relative;width:100%;height:auto !important;min-height:540px; position:relative;overflow:hidden; border-radius:16px;"></div>
<script type="text/javascript">
var doctxt = " %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%201000%20650%22%20width%3D%221000%22%20height%3D%22650%22%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//www.kfzimg.com/G07/M00/EE/4E/qoYBAFw9Um6AS4drAAn4fUgVWCg317_n.jpg%22%20opacity%3D%221%22%20width%3D%221000%22%20height%3D%22650%22%20x%3D%220%22%20y%3D%220%22%20%20preserveAspectRatio%3D%22none%22%20/%3E%0A%0A%3Cg%20transform%3D%22rotate%28-90%2C325%2C666%29%22%3E%0A%0A%3C%21--%20%20%3Cg%3E%u5143%u7D20%u5185%u7684%u5143%u7D20%u7684transform%u5C5E%u6027%u65CB%u8F6C-90%u5EA6%uFF0C%u4EE5%28325%2C666%29%u4E3A%u539F%u70B9%u8F6C%u52A8%u3002%20%20%20--%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu2CD.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.begin%22/%3E%0A%3Canimate%20id%3D%22p0%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%224%3B%20pf.end-9.9%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p0.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuR8e.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p0.end-10%22/%3E%0A%3Canimate%20id%3D%22p1%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p0.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p1.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOufvd.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p1.end-10%22/%3E%0A%3Canimate%20id%3D%22p2%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p1.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p2.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuWgH.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p2.end-10%22/%3E%0A%3Canimate%20id%3D%22p3%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p2.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p3.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuc4O.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p3.end-10%22/%3E%0A%3Canimate%20id%3D%22p4%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p3.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p4.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu4KA.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p4.end-10%22/%3E%0A%3Canimate%20id%3D%22p5%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p4.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p5.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuTVP.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p5.end-10%22/%3E%0A%3Canimate%20id%3D%22p6%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p5.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p6.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu5DI.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p6.end-10%22/%3E%0A%3Canimate%20id%3D%22p7%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p6.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p7.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuIbt.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p7.end-10%22/%3E%0A%3Canimate%20id%3D%22p8%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p7.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p8.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuqPS.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p8.end-10%22/%3E%0A%3Canimate%20id%3D%22p9%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p8.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22p9.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOu7Uf.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22p9.end-10%22/%3E%0A%3Canimate%20id%3D%22pa%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22p9.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pa.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuL8g.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pa.end-10%22/%3E%0A%3Canimate%20id%3D%22pb%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22pa.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pb.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuO2Q.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pb.end-10%22/%3E%0A%3Canimate%20id%3D%22pc%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22pb.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pc.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuXvj.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pc.end-10%22/%3E%0A%3Canimate%20id%3D%22pd%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22pc.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pd.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuvKs.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pd.end-10%22/%3E%0A%3Canimate%20id%3D%22pe%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22pd.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pe.end%22/%3E%0A%3C/image%3E%0A%0A%3Cimage%20xlink%3Ahref%3D%22https%3A//z3.ax1x.com/2021/09/09/hOuxrn.jpg%22%20opacity%3D%220%22%20width%3D%22650%22%20height%3D%221332%22%20x%3D%22341%22%20y%3D%221333%22%20%20preserveAspectRatio%3D%22none%22%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%221%22%20begin%3D%22pe.end-10%22/%3E%0A%3Canimate%20id%3D%22pf%22%20attributeName%3D%22y%22%20from%3D%221333%22%20to%3D%22-999%22%20begin%3D%22pe.end-10%22%20dur%3D%2223.32%22%20fill%3D%22freeze%22/%3E%0A%3Cset%20attributeName%3D%22opacity%22%20to%3D%220%22%20begin%3D%22pf.end%22/%3E%0A%3C/image%3E%0A%0A%3C/g%3E%0A%3C/svg%3E%0A ";
var blk = document.querySelector('#blkx1');
blk.innerHTML = unescape(doctxt);
</script>
理解了，矩形元素只起了个背景色作用。:lol 寒冬残荷 发表于 2021-9-10 23:34
理解了，矩形元素只起了个背景色作用。
这个背景图片好，
页:
1
[2]