中畫網

標題: 圓明園《四十景圖》--------SVG 習作 [打印本頁]

作者: 紅楓 時間: 2021-9-16 19:27
標題: 圓明園《四十景圖》--------SVG 習作

作者: 195400 時間: 2021-9-16 19:46

作者: 紅楓 時間: 2021-9-16 21:15

195400 發表于 2021-9-16 19:46

作者: 西椅子胡同 時間: 2021-9-17 05:20
精彩佳作，美不勝收！贊！

作者: 195400 時間: 2021-9-17 06:53

紅楓發表于 2021-9-16 21:15 var lxtxt =[">lmth/

作者: 紅楓 時間: 2021-9-17 07:38

195400 發表于 2021-9-17 06:53

謝謝，SVG框圖比調到了與DIV框一致了，但再調整字號就顯麻煩些了。我原字號不是一致的，且我是先預設了這樣的SVG框架比后再配下面文字字號的。

作者: 195400 時間: 2021-9-17 08:00

紅楓發表于 2021-9-17 07:38
謝謝，SVG框圖比調到了與DIV框一致了，但再調整字號就顯麻煩些了。我原字號不是一致的，且我是先預設了這 ...

svg 是可縮放矢量圖形的意思，就是說無論svg是多大，實際表現取決于外層容器的大小，所以無須考慮字體的大小。同樣飛鳥放在svg外就要考慮大小配合，而放在svg里就可以隨外層容器任意縮放了。

另外40幅圖片只轉了一圈就不轉了，是不是我看錯了？

作者: 紅楓 時間: 2021-9-17 08:34

195400 發表于 2021-9-17 08:00
svg 是可縮放矢量圖形的意思，就是說無論svg是多大，實際表現取決于外層容器的大小，所以無須考慮字體 ...

是一圈，還沒學會自動重播，懇請您指導！

作者: 雄鷹翱翔 時間: 2021-9-17 08:39
欣賞您的佳作，贊一個！

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

紅楓發表于 2021-9-17 08:34
是一圈，還沒學會自動重播，懇請您指導！

5樓現在是循環的。只要改一下外框的寬度就可以得到想要的大小。

作者: 紅楓 時間: 2021-9-17 12:56

雄鷹翱翔發表于 2021-9-17 08:39 欣賞您的佳作，贊一個！

作者: 紅楓 時間: 2021-9-17 12:58

西椅子胡同發表于 2021-9-17 05:20 精彩佳作，美不勝收！贊！

作者: 紅楓 時間: 2021-9-17 13:31

195400 發表于 2021-9-17 10:12 5樓現在是循環的。只要改一下外框的寬度就可以得到想要的大小。

哦，我明白了：循環播放關鍵在于G 標簽 ID的進出銜接;也明白了其他裝飾圖片可以放在 SVG 框架內的。感謝您的熱情指導！

作者: 195400 時間: 2021-9-17 13:50

紅楓發表于 2021-9-17 13:31 哦，我明白了：循環播放關鍵在于G 標簽 ID的進出銜接;也明白了其他裝飾圖片可以放在 SVG 框架內的。 ...

用不著分組，一個接一個關系更明確，直觀好理解。用分組是因為那些圖片本不是一處的。

作者: 寒冬殘荷 時間: 2021-9-17 15:37
欣賞老師們的精美大作！兩位老師制作辛苦了，編輯四十景圖的代碼要花好多時間呀，僅說文字分行就要花時間了！我看代碼都感覺時間太長，沒耐心全部看完。僅看了前部分代碼。

作者: 寒冬殘荷 時間: 2021-9-17 16:00

作者: 寒冬殘荷 時間: 2021-9-17 16:03
全部改動文字的位置要花太多時間，沒有耐心，反正理解了就行了。

作者: 寒冬殘荷 時間: 2021-9-17 16:07
背景圖改為藍天白云——與飛鳥應景。標題和作者的文字在動畫開始后去掉，動畫看起來較潔凈

作者: 紅楓 時間: 2021-9-17 17:23

寒冬殘荷發表于 2021-9-17 16:07
背景圖改為藍天白云——與飛鳥應景。標題和作者的文字在動畫開始后去掉，動畫看起來較潔凈

藍天白云與飛鳥應景，換頁時的觀賞效果確實更自然協調些了。

作者: 195400 時間: 2021-9-18 19:38

寒冬殘荷發表于 2021-9-17 15:37
欣賞老師們的精美大作！兩位老師制作辛苦了，編輯四十景圖的代碼要花好多時間呀，僅說文字分行就要花時間了 ...

想想辦法文本也可以讓它自動換行。

作者: 紅楓 時間: 2021-9-18 19:45

195400 發表于 2021-9-18 19:38
想想辦法文本也可以讓它自動換行。

略看過教程，僅介紹tspan 方法，還有好方法？望請指教。

作者: 紅楓 時間: 2021-9-18 19:51
調整過文字錨點為end，就這作品而言效果好一點！

作者: 195400 時間: 2021-9-18 19:53

紅楓發表于 2021-9-18 19:45 略看過教程，僅介紹tspan 方法，還有好方法？望請指教。

作者: 紅楓 時間: 2021-9-18 19:58

195400 發表于 2021-9-18 19:53

謝謝！明天下載后學習學習。

作者: 紅楓 時間: 2021-9-19 16:55

195400 發表于 2021-9-18 19:53

下載了。略看：似乎用了一個外部插件，且是運用及調用JS程序按音畫的歌詞同步顯示原理，達到了長段落文字的自動換行排列效果（可能是這樣）。您真高明，不愧是個代碼高手！佩服！！！
文件得好好保存并認真學習。

作者: 195400 時間: 2021-9-19 19:27

紅楓發表于 2021-9-19 16:55
下載了。略看：似乎用了一個外部插件，且是運用及調用JS程序按音畫的歌詞同步顯示原理，達到了長段落文 ...

似乎用了一個外部插件

這可不僅僅只是個插件，而是個十分強大的js庫，使用jquery使得代碼簡單直觀。[attach]183295[/attach]

當然也可以不用jquery來實現，例如WAAPI，它不需要任何附加的js庫，因為瀏覽器本身就能夠支持。

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