iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 0 留言 909 瀏覽

鐵人賽 Modern Web DAY 24

要不要 Vue 點酷酷的元件？系列第 24 篇

技術 D24 - 固執的滑動條：開發元件

基本結構滑動條主體很單純，使用 div 就可以完成，不過握把的部分需要使用 SVG 實現。結構概念如下圖：「容器」負責包裝所有內容，並提供水平移動的基...

鱈魚 ‧ 2024-10-07 ‧團隊鐵齒不信寫不完

1 Like 0 留言 158 瀏覽

鐵人賽佛心分享-SideProject30 DAY 10

收納規劃APP 系列第 10 篇

技術 Day10：瀏覽器座標 vs SVG 座標演示

經歷了暴風重寫之後的感想計算的時候如果沒有轉換成 SVG 座標系統，SVG移動的位置計算就會以瀏覽器的為主，如果有置中或是padding一定就會偏移，而且XY軸...

Zoe Wu ‧ 2024-09-24

1 Like 0 留言 170 瀏覽

鐵人賽佛心分享-SideProject30 DAY 9

收納規劃APP 系列第 9 篇

技術 Day9：平面圖疊家具(二)

因為搞不清楚到底什麼問題導致各種偏移，所以從SVG開始重新做，只保留兩個控制點跟一個圖形去掉底圖的控制功能跟固定功能，開始抓蟲本來以為可以用AI處理bug，推...

Zoe Wu ‧ 2024-09-23

1 Like 0 留言 103 瀏覽

鐵人賽佛心分享-SideProject30 DAY 8

收納規劃APP 系列第 8 篇

技術 Day8：平面圖疊家具(一)

這個部份我大概卡了一、兩個禮拜，還沒卡完，雖然是30天連續發文的鐵人賽，但是 side project 應該會做超過30天。把東西疊在一起之後開始出現問題，腦...

Zoe Wu ‧ 2024-09-22

1 Like 0 留言 2173 瀏覽

技術 SVG 自學微筆記(10) - SVG...然後呢?

基本上是這系列最後一篇，除非之後接觸到跟SVG相關的有趣應用! (≧▽≦) 我在大學畢業的最後一學期，選修了網頁資料視覺化的課程，課程主要使用D3.js這個...

Xiang1009 ‧ 2023-06-22

1 Like 0 留言 2352 瀏覽

技術 SVG 自學微筆記(09) - 路徑

SVG 自學微筆記完! (๑´ㅂ`๑) 學習資源: W3Schools、其他網路資料說到SVG中最複雜的東西，路徑(Path)絕對是一個大魔王，它有太...

Xiang1009 ‧ 2023-06-03

0 Like 0 留言 1024 瀏覽

技術 SVG 自學微筆記(08) - 線性&放射漸層

不定更新、即將迎來結尾 (๑´ㅂ`๑) 學習資源: W3Schools、其他網路資料漸層(Gradients)是W3Schools關於SVG基礎教學的...

Xiang1009 ‧ 2023-05-28

0 Like 0 留言 751 瀏覽

技術 SVG 自學微筆記(07) - 圖形濾鏡

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG有提供Filter(濾鏡)這個東西，可以用來在SVG圖形上加入特殊的效果，像...

Xiang1009 ‧ 2023-05-26

1 Like 0 留言 851 瀏覽

技術 SVG 自學微筆記(06) - 線段的特性

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料在前面的微筆記中，有使用到<line></line>來繪製...

Xiang1009 ‧ 2023-05-24

1 Like 0 留言 1031 瀏覽

技術 SVG 自學微筆記(05) - 在圖上加文字

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料之前有段時間挺忙的，所以停更了好一陣子 ಥ⌣ಥ，但至少還沒爛尾 ٩(๑❛ᴗ❛๑)۶...

Xiang1009 ‧ 2023-05-19

0 Like 0 留言 761 瀏覽

技術 SVG 自學微筆記(04) - 繪製多邊形、折線

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料 SVG : 多邊形 (僅列出部分有使用到的屬性) <svg>&lt...

Xiang1009 ‧ 2023-05-18

1 Like 0 留言 713 瀏覽

技術 SVG 自學微筆記(03) - 繪製圓形、橢圓形 & 線段

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料這篇筆記使用到的圖形屬性，基本上都跟矩形那篇差不多。 SVG : 圓形 (僅列出部...

Xiang1009 ‧ 2023-05-14

1 Like 0 留言 880 瀏覽

技術 SVG 自學微筆記(02) - 繪製矩形 & 補充說明

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料前置 : 開發環境在開始畫SVG圖形前，需要先建好開發環境，以下是我的配置 :...

Xiang1009 ‧ 2023-05-12

2 Like 0 留言 958 瀏覽

技術 SVG 自學微筆記(01) - 初步認識 SVG

不定更新、可能爛尾XD 學習資源: W3Schools、其他網路資料關於 SVG SVG 全名為 Scalable Vector Graphics 即...

Xiang1009 ‧ 2023-05-09

0 Like 0 留言 931 瀏覽

鐵人賽自我挑戰組 DAY 29

Do you wanna play? CSS game ぎりぎり系列第 29 篇

技術 [Day 29] Checklist: 打個勾勾完賽吧

很快地，今天來到了第29天，我們來實作Day #27 Checklist CodePen: https://codepen.io/stevetanus/pen/...

steventhibe ‧ 2022-10-06

0 Like 0 留言 422 瀏覽

鐵人賽自我挑戰組 DAY 24

Do you wanna play? CSS game ぎりぎり系列第 24 篇

技術 [Day 24] Fitness Tracker: 您今天運動了嗎~我沒有...

現在科技產品日新月異，許多人都會戴上智慧手錶、手環來追蹤運動情況，各運動品牌也有屬於會員的數據紀錄網頁，我們常會在上面看到當日運動數據的圖表。今天我們就來實作D...

steventhibe ‧ 2022-10-01

0 Like 0 留言 866 瀏覽

鐵人賽 Software Development DAY 14

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 14 篇

技術 Day14: three.js 3D圖表特效開發實戰：繪畫就跟佐為下棋一樣簡單：線段原理

圖片來源線段是什麼？點線面構成一切，而目前為止，我們都在花時間在點(Vector)跟面(Mesh)上。線段由點產生，它也組成面，這之間需要轉換API。除...

伍瑪斯 ‧ 2022-09-29

0 Like 0 留言 1209 瀏覽

鐵人賽自我挑戰組 DAY 23

Do you wanna play? CSS game ぎりぎり系列第 23 篇

技術 [Day 23] Pac-Man: パックマン小精靈

相信大家在小時候，應該多少玩過小精靈(Pac-Man)的遊戲，就是走在迷宮中吃豆子逃避幽靈，努力存活下去的遊戲。今天我們就來實作Day #21 Pac-Man...

steventhibe ‧ 2022-09-30

1 Like 1 留言 543 瀏覽

鐵人賽自我挑戰組 DAY 22

Do you wanna play? CSS game ぎりぎり系列第 22 篇

技術 [Day 22] Send Mail: 您的一封來信

在製作個人網頁時，通常會有一個contactme(與我聯絡)的表格，這時候，我們就可以想想看怎麼美化我們的送信動畫~今天我們來實作Day #20 Send Ma...

steventhibe ‧ 2022-09-29

0 Like 0 留言 1234 瀏覽

鐵人賽自我挑戰組 DAY 19

Do you wanna play? CSS game ぎりぎり系列第 19 篇

技術 [Day 19] Penrose Triangle: 潘洛斯三角(不可能三角)

今天我們來實作Day #17，潘洛斯三角形為存在於二維空間的三角形，而在現實世界中不可能存在的物體。潘洛斯三角維基百科 Penrose Triangle...

steventhibe ‧ 2022-09-26

0 Like 0 留言 560 瀏覽

鐵人賽自我挑戰組 DAY 18

Do you wanna play? CSS game ぎりぎり系列第 18 篇

技術 [Day 18] Blobby: 改變形狀的閃耀泡泡

在昨天的文章學習到新的scale, rotate, translate的寫法，可以從transform獨立出來，今天就可以實際運用，配合SVG的圖形，來達到改變...

steventhibe ‧ 2022-09-25

0 Like 0 留言 605 瀏覽

鐵人賽自我挑戰組 DAY 6

Do you wanna play? CSS game ぎりぎり系列第 6 篇

技術 [Day 6] Statistic: 來呈現文章瀏覽數逐漸下滑的趨勢(>_<)

Statistic 今天我們來實作Day #5 搭配上筆者Thibe這一週的文章瀏覽和預期數據，看來這下滑趨勢達到顯著呢(p < 0.05)!此次作品建議...

steventhibe ‧ 2022-09-13

0 Like 0 留言 810 瀏覽

鐵人賽自我挑戰組 DAY 2

Do you wanna play? CSS game ぎりぎり系列第 2 篇

技術 [Day 2] 30 Days Iron Man: 參拾天鐵人

100 Days CSS Challenge 今天在了解前置設定之後，咱們來一起破關吧~就從Day #1開始!以下為重點介紹，完整程式碼請參考作品連結 1....

steventhibe ‧ 2022-09-09

0 Like 1 留言 2934 瀏覽

鐵人賽 Modern Web DAY 29

這個網站也太嗨！30 個網頁動態提案系列第 31 篇

技術 #28- D3.js 地圖動起來!用SVG viewbox/D3 fitExtent讓地圖置中

今天來讓地圖動起來!老樣子，先看成果~神秘的非洲大陸～相信沒幾個人認識這些國家吧XDDD 我自己覺得地圖只要格式對的話，其實用D3.js去繪製不難，我遇到的難點...

Global Rachel ‧ 2021-10-14 ‧團隊寫 code 需要講幹話

0 Like 0 留言 1493 瀏覽

鐵人賽 Modern Web DAY 21

這個網站也太嗨！30 個網頁動態提案系列第 23 篇

技術 #20-有看到我的貓嗎？用offsetPath讓貓貓滾起來！(SVG)

偶爾會看到，往下滾，球就會跟著滾動的幅度以拋物線移動。今天就來使用SVG的Path做做看！其實是我做好的第二個版本，第一個是使用GSAP & Scro...

Global Rachel ‧ 2021-10-06 ‧團隊寫 code 需要講幹話

1 Like 0 留言 3024 瀏覽

鐵人賽 Modern Web DAY 19

這個網站也太嗨！30 個網頁動態提案系列第 21 篇

技術 #18-手寫字特效炫起來！(SVG dasharray & dashoffset)

第3天寫了打字特效炫起來！今天來個姊妹篇，手寫字特效炫起來!已經默默進入SVG幾天了... 老樣子先來看成果！底線是我用Adobe XD拉的～按下右鍵複製S...

Global Rachel ‧ 2021-10-04 ‧團隊寫 code 需要講幹話

1 Like 0 留言 2865 瀏覽

鐵人賽 Modern Web DAY 18

這個網站也太嗨！30 個網頁動態提案系列第 20 篇

技術 #17-不用套件讓網站Logo動起來～(SVG SMIL)

要讓SVG 動起來，可以使用SMIL：SVG的原生動畫規範，雖然前幾年Chrome放話不再支援，但這幾年好像暫緩了。當然不用SMIL就可以用最近超常看到的GS...

Global Rachel ‧ 2021-10-03 ‧團隊寫 code 需要講幹話

0 Like 0 留言 2032 瀏覽

鐵人賽 Modern Web DAY 3

從原料到燃料，從資料到預料—資料駕馭網頁之理科的美學系列第 3 篇

技術 D3JsDay03可縮放向量圖型不用怕圖片不行—SVG簡介

由於D3Js的組成部分來自於操控SVG(Scalable Vector Graphics)，所以簡單介紹一下SVG。 SVG組成是屬於向量圖形(透過電腦計算路徑...

DannyChen ‧ 2021-09-18 ‧團隊好想工作室V5.0

0 Like 0 留言 2289 瀏覽

技術 [Android Studio] 匯入向量圖檔 .svg 時出現錯誤 <text> is not supported 的解決方式

今天因應工作上的需求在專案中匯入 .svg 的向量圖檔卻出現了以下錯誤畫面這才發現原來這張 .svg 圖檔的內容是由文字組成，而 Android Studio...

lionlions ‧ 2020-12-02

0 Like 0 留言 2459 瀏覽

技術將Word(Excel)內容匯出成SVG

因為前陣子發表的研討會文章被轉期刊，所以這幾天都在忙著重寫文章，遇到一個大家都覺得很煩排版的問題，這邊就分享一下自己這幾天專研出來的解法。排版最大的問題在於表...

a26833765 ‧ 2020-11-14