中畫網(wǎng)

標題: 清明上河圖 --- SVG 長卷畫面無縫連續(xù)滾動的嘗試 [打印本頁]

作者: 195400 時間: 2021-9-10 12:12
標題: 清明上河圖 --- SVG 長卷畫面無縫連續(xù)滾動的嘗試

作者: 西椅子胡同 時間: 2021-9-10 14:15
教科書式的精彩大作，欣賞、學習！

首圖與其后各圖開始滾動時間的設定很是巧妙！

g標簽的使用恰到好處！

贊！贊！！贊！��！

作者: 西椅子胡同 時間: 2021-9-10 14:26
創(chuàng)新讓作品更精彩�。�！

為195400老師的作品點贊�。。�

作者: 西椅子胡同 時間: 2021-9-10 14:50
在我這里，用360安全瀏覽器和QQ、Edge、Chrome瀏覽器均可無縫循環(huán)播放。

作者: 195400 時間: 2021-9-10 16:13

西椅子胡同發(fā)表于 2021-9-10 14:15
教科書式的精彩大作，欣賞、學習！

作者: 195400 時間: 2021-9-10 16:16

西椅子胡同發(fā)表于 2021-9-10 14:26
創(chuàng)新讓作品更精彩�。。�

如果是寬幅圖片CSS動畫要容易些，處理需要轉(zhuǎn)向的圖片SVG有獨特之處，這個練習主要還是圖片的轉(zhuǎn)向。

作者: 195400 時間: 2021-9-10 16:17

西椅子胡同發(fā)表于 2021-9-10 14:50
在我這里，用360安全瀏覽器和QQ、Edge、Chrome瀏覽器均可無縫循環(huán)播放。

作者: 西椅子胡同 時間: 2021-9-10 17:38

195400 發(fā)表于 2021-9-10 16:16
如果是寬幅圖片CSS動畫要容易些，處理需要轉(zhuǎn)向的圖片SVG有獨特之處，這個練習主要還是圖片的轉(zhuǎn)向。

是的，見過您用css實現(xiàn)無縫連續(xù)滾動的帖子。豎發(fā)寬圖實現(xiàn)水平滾動就要解決圖片轉(zhuǎn)向問題，圖片轉(zhuǎn)向后的圖片定位（特別是不同幅面圖片在轉(zhuǎn)向后的定位）也要解決好。您做的很好！

作者: 195400 時間: 2021-9-10 18:24

西椅子胡同發(fā)表于 2021-9-10 17:38
是的，見過您用css實現(xiàn)無縫連續(xù)滾動的帖子。豎發(fā)寬圖實現(xiàn)水平滾動就要解決圖片轉(zhuǎn)向問題，圖片轉(zhuǎn)向后的圖 ...

[attach]183171[/attach]

作者: 紅楓 時間: 2021-9-10 20:51

作者: 195400 時間: 2021-9-10 20:56

紅楓發(fā)表于 2021-9-10 20:51
var lxtxt =[">lmth/

作者: 寒冬殘荷 時間: 2021-9-10 22:24
今天函授的這一課主要內(nèi)容是svg的<g>元素的使用。

老師，這里為什么還要用svg的矩形元素<rect>

眼睛痛，幾天來上來都只是看一眼就下線了。

作者: 寒冬殘荷 時間: 2021-9-10 22:28
為了邊框？，我的瀏覽器沒看到有描邊。

作者: 寒冬殘荷 時間: 2021-9-10 22:40
反復看了代碼，還是覺得矩形元素在這里沒起作用，學生遲鈍，請老師指點。

作者: 195400 時間: 2021-9-10 22:58

寒冬殘荷發(fā)表于 2021-9-10 22:24
今天函授的這一課主要內(nèi)容是svg的元素的使用。
老師，這里為什么還要用svg的矩形元素

這算是個遮丑的吧

為了計算方便所有圖片的起點都在1000（x=1000 或 y=1000), 這樣啟動時viewbox就是個空白不好看，所以加了個固定的矩形放在那里。

又琢磨了下，用的旋轉(zhuǎn)方法太繁瑣了，還是《西椅子胡同》用的轉(zhuǎn)換直觀簡單明了。

作者: 195400 時間: 2021-9-10 23:00

寒冬殘荷發(fā)表于 2021-9-10 22:28
為了邊框？，我的瀏覽器沒看到有描邊。

那些花哨我還嫌麻煩，沒裝飾

作者: 寒冬殘荷 時間: 2021-9-10 23:33

作者: 寒冬殘荷 時間: 2021-9-10 23:34
理解了，矩形元素只起了個背景色作用。

作者: 195400 時間: 2021-9-10 23:37

寒冬殘荷發(fā)表于 2021-9-10 23:34
理解了，矩形元素只起了個背景色作用。

這個背景圖片好，

歡迎光臨中畫網(wǎng) (http://www.nujv.cn/)