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

1 Like 0 留言 1393 瀏覽

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

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

Xiang1009 ‧ 2023-06-22

1 Like 0 留言 1465 瀏覽

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

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

Xiang1009 ‧ 2023-06-03

0 Like 0 留言 822 瀏覽

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

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

Xiang1009 ‧ 2023-05-28

0 Like 0 留言 647 瀏覽

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

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

Xiang1009 ‧ 2023-05-26

1 Like 0 留言 716 瀏覽

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

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

Xiang1009 ‧ 2023-05-24

1 Like 0 留言 873 瀏覽

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

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

Xiang1009 ‧ 2023-05-19

0 Like 0 留言 625 瀏覽

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

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

Xiang1009 ‧ 2023-05-18

1 Like 0 留言 566 瀏覽

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

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

Xiang1009 ‧ 2023-05-14

1 Like 0 留言 749 瀏覽

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

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

Xiang1009 ‧ 2023-05-12

2 Like 0 留言 823 瀏覽

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

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

Xiang1009 ‧ 2023-05-09

0 Like 0 留言 666 瀏覽

鐵人賽自我挑戰組 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 留言 292 瀏覽

鐵人賽自我挑戰組 DAY 24

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

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

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

steventhibe ‧ 2022-10-01

0 Like 0 留言 833 瀏覽

鐵人賽自我挑戰組 DAY 23

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

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

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

steventhibe ‧ 2022-09-30

0 Like 0 留言 666 瀏覽

鐵人賽 Software Development DAY 14

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

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

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

伍瑪斯 ‧ 2022-09-29

1 Like 1 留言 400 瀏覽

鐵人賽自我挑戰組 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 留言 993 瀏覽

鐵人賽自我挑戰組 DAY 19

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

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

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

steventhibe ‧ 2022-09-26

0 Like 0 留言 431 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

steventhibe ‧ 2022-09-25

0 Like 0 留言 474 瀏覽

鐵人賽自我挑戰組 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 留言 635 瀏覽

鐵人賽自我挑戰組 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 留言 2619 瀏覽

鐵人賽 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 留言 1232 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

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

1 Like 0 留言 2551 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

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

1 Like 0 留言 2476 瀏覽

鐵人賽 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 留言 1738 瀏覽

鐵人賽 Modern Web DAY 3

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

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

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

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

0 Like 0 留言 2019 瀏覽

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

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

lionlions ‧ 2020-12-02

0 Like 0 留言 2109 瀏覽

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

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

a26833765 ‧ 2020-11-14

0 Like 0 留言 1265 瀏覽

鐵人賽 Mobile Development DAY 29

老姐好像要用 Kotlin 寫專案，能撐30天嗎？系列第 29 篇

技術注意健康的第二十九天：不要廉價賣肝，連假更要養肝。

「這是新的 API 主機網址。」我把昨天拿到的雲端主機網址交給了老姐。「了解。」老姐把路徑改上之後就返回的之前跳過的 UI 繪製和 API 串接作業。死線的...

Kate ‧ 2020-10-08 ‧團隊Kotlin 鐵人陣

0 Like 0 留言 942 瀏覽

鐵人賽自我挑戰組 DAY 14

架站好好玩-Wordpress架站和SEO優化之學習全記錄系列第 14 篇

技術第14天:『WordPress架站第九步』-附加CSS設置社群連結Icon

WordPress架站-附加CSS設置社群Icon 一般經營網站,通常會在選單附近放上社群相關連結和Mail,這個一般有三種方法: 安裝社群連結的外掛軟體...

Cindy ‧ 2020-09-29

2 Like 0 留言 2748 瀏覽

技術使用 Adobe XD 建立 Icon

現在網路上可以找到許多免費 Icon ，對於大部分的網頁開發已經很足夠了，但真的需要自己設計 Icon 時該怎麼辦呢？這篇來分享一下一個工程師要如何用 Adob...

Peter Chen ‧ 2020-03-28

0 Like 0 留言 6565 瀏覽

技術在 Vue 聰明使用 SVG-Icon

通常要在Vue的專案裡使用SVG，最簡單的會有兩種方式：第一種：Using SVG as an ＜img＞利用 <img> 標籤來引入，此時 S...

MaxLeeBK ‧ 2020-03-09