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

2 Like 0 留言 11059 瀏覽

鐵人賽 Modern Web DAY 16

前端「設計」聖光之路系列第 16 篇

技術 SVG 輸出注意事項

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。...

卡斯伯 ‧ 2018-10-30

3 Like 0 留言 9887 瀏覽

鐵人賽其他技術 DAY 30

SVG 30 天 ~ 就要醬玩系列第 30 篇

技術 Day30 - SVG 完整教學 30+1 天

非常感謝 IT 邦幫忙舉辦鐵人賽，因為有了之前的文章，讓我學會了保哥寫的 GIT 和洧杰哥寫的 SASS，今年總算是鼓起勇氣來參賽了，30 天不長不短，但是對自...

oxxo ‧ 2014-10-22

2 Like 0 留言 9233 瀏覽

鐵人賽其他技術 DAY 9

SVG 30 天 ~ 就要醬玩系列第 9 篇

技術 Day9 - 理解 SVG viewport 與 viewbox

前一天的文章裡有提到 viewbox ，但是總覺得沒有直接來篇文章介紹，觀念上再遇到的時候又會亂掉了。這篇主要會介紹 viewport ，當中包含了 viewb...

oxxo ‧ 2014-10-01

5 Like 5 留言 8057 瀏覽

鐵人賽其他技術 DAY 1

SVG 30 天 ~ 就要醬玩系列第 1 篇

技術 Day1 - 初探 SVG

第一次參加鐵人賽真是緊張，在很多想寫的主題下，選擇了 SVG，主要除了瀏覽器已經都開始支援，更重要的是自己對圖形與設計的愛，對於視覺設計師而言，向量繪圖和基礎動...

oxxo ‧ 2014-09-23

2 Like 0 留言 7897 瀏覽

技術 HTML5 與 SVG圖形入門

SVG（Scalable Vector Graphics） SVG是一種XML語法而且已經納入HTML之中，可以把互動圖形放在您的網頁裡面（放在<svg&...

mis2000lab ‧ 2014-09-22

5 Like 1 留言 7301 瀏覽

鐵人賽 Modern Web DAY 14

前端「設計」聖光之路系列第 14 篇

技術網頁圖片格式的運用

隨著裝置解析度越來越高，如果是以 1:1 的尺寸輸出圖示時，都會明顯地看到圖示邊緣出現鋸齒，這樣的情況下無疑是降低設計的品質，為了避免這樣問題，實作中通常會使...

卡斯伯 ‧ 2018-10-28

0 Like 0 留言 6559 瀏覽

技術在 Vue 聰明使用 SVG-Icon

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

MaxLeeBK ‧ 2020-03-09

1 Like 0 留言 5174 瀏覽

鐵人賽其他技術 DAY 13

SVG 30 天 ~ 就要醬玩系列第 13 篇

技術 Day13 - SVG text 文字

「文字」雖然字面上的解釋很簡單，但深入研究之後，發現 SVG 對於文字的設定，比我想像的複雜得多，但也因為有了這些我所不知道的設定和屬性，讓原本單純樸實的文字，...

oxxo ‧ 2014-10-05

1 Like 0 留言 4952 瀏覽

鐵人賽其他技術 DAY 21

SVG 30 天 ~ 就要醬玩系列第 21 篇

技術 Day21 - 控制 SVG 的小小注意事項

上一篇已經出現了使用 jQuery 畫出 SVG 的內容，不過還是寫死的，如果要使用可以讀取 json 的方式，將要用到比較進階的手法，因此，在介紹 SVG...

oxxo ‧ 2014-10-13

1 Like 2 留言 4892 瀏覽

鐵人賽其他技術 DAY 11

SVG 30 天 ~ 就要醬玩系列第 11 篇

技術 Day11 - 再談 SVG 漸層色

先前在 SVG 研究之路 (7) - fill 填色有介紹過 SVG 的 fill 填色，文章後面介紹了基本的漸層填色，但並沒有深入的介紹進一步的設定，然而高...

oxxo ‧ 2014-10-03

2 Like 0 留言 4681 瀏覽

鐵人賽其他技術 DAY 20

SVG 30 天 ~ 就要醬玩系列第 20 篇

技術 Day20 - SVG pie chart 圓餅圖實作

在之前我所撰寫的 SVG path 的文章 SVG 研究之路 (5) - Path 進階篇當中，詳細介紹了關於 path 的 A 參數用法，回想一下，A 參...

oxxo ‧ 2014-10-12

2 Like 0 留言 4649 瀏覽

技術 Svg - 進階功能介紹

上次介紹了基礎圖形的繪製，這次介紹一些其他的元素群組 <g> 是 Group 的意思，其子元素會繼承該元素的屬性，常用在 transform &l...

Ares ‧ 2019-07-23

1 Like 0 留言 4647 瀏覽

鐵人賽其他技術 DAY 22

SVG 30 天 ~ 就要醬玩系列第 22 篇

技術 Day22 - 寫 jquery 產生 SVG 圓餅圖

之前我們提過了 SVG pie chart 圓餅圖實作和控制 SVG 的注意事項，現在就要來將兩者結合，使用 jquery 來畫出圓餅圖，同時使用 js...

oxxo ‧ 2014-10-14

1 Like 0 留言 4457 瀏覽

鐵人賽其他技術 DAY 19

SVG 30 天 ~ 就要醬玩系列第 19 篇

技術 Day19 - 深入理解 SVG SMIL Animation

上一篇應該已經大概明白 SVG 的動畫是怎麼一回事，但仍然有很多屬性和設定沒有解釋清楚，然而這些屬性和設定，才是 SVG 動畫的最精華所在，讓我們繼續看下去~...

oxxo ‧ 2014-10-11

1 Like 0 留言 4261 瀏覽

鐵人賽其他技術 DAY 10

SVG 30 天 ~ 就要醬玩系列第 10 篇

技術 Day10 - SVG fill 填色

介紹過了 stroke 邊框之後，接下來就要介紹 fill 填色。( oxxostudio.tw 同步發表：SVG 研究之路 (7) - fill 填色，現在...

oxxo ‧ 2014-10-02

5 Like 2 留言 3947 瀏覽

鐵人賽開發技術 DAY 26

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 26 篇

技術 MIS2000Lab.的「HTML5 認證考試，從零開始」#26-- 先進圖形 / Canvas API

=============================================== 本系列文章已經集結出書 HTML5、CSS、JavaScript...

mis2000lab ‧ 2014-10-21

3 Like 2 留言 3931 瀏覽

鐵人賽其他技術 DAY 23

SVG 30 天 ~ 就要醬玩系列第 23 篇

技術 Day23 - SVG + CSS 製作 Material Design 進度條

這是一個利用 CSS 與 SVG 所做出來的進度條，仿照 Google Material Design 的設計風格設計，雖然 Google 有提供一系列的扁平...

oxxo ‧ 2014-10-15

1 Like 0 留言 3857 瀏覽

鐵人賽其他技術 DAY 29

SVG 30 天 ~ 就要醬玩系列第 29 篇

技術 Day29 - SVG filter - feDisplacementMap

在玩 photoshop 的時候，我時常會使用一個名為「移置」的特效，這個特效說難不難，可以參考我在 2008 年寫的的教學：photoshop：國旗飄揚皺折...

oxxo ‧ 2014-10-21

3 Like 0 留言 3573 瀏覽

鐵人賽開發技術 DAY 1

SVG 與 D3.js 系列第 1 篇

技術 2014 鐵人賽慢慢開始跑 [d3js 與 SVG]

和朋友有聊到鐵人賽這次的發文問題，確實問題挺多的...，或許這也是鐵人的挑戰之一吧，不過還好我有自備Blog，建議可以連到我提供的網址觀看～以下文章同步發表於...

卡斯伯 ‧ 2014-09-30

1 Like 1 留言 3479 瀏覽

鐵人賽其他技術 DAY 6

SVG 30 天 ~ 就要醬玩系列第 6 篇

技術 Day6 - SVG stroke 邊框

前面的章節都在介紹繪製形狀，而我都是使用單純的線條來描繪形狀的邊框，因此這篇就來聊聊 stroke ( 邊框 ) 的設定。( oxxostudio.tw 同步發...

oxxo ‧ 2014-09-28

1 Like 0 留言 3479 瀏覽

鐵人賽其他技術 DAY 17

SVG 30 天 ~ 就要醬玩系列第 17 篇

技術 Day17 - SVG transform Matrix

前一篇介紹了 SVG tansform 的前四個基本方法：translate、scale、rotate 和 skew，其實這四個方法都是建構在 Matrix 這...

oxxo ‧ 2014-10-09

1 Like 0 留言 3462 瀏覽

鐵人賽其他技術 DAY 30

SVG 30 天 ~ 就要醬玩系列第 31 篇

技術 Day30+1 - SVG filter - feConvolveMatrix

之前有介紹過模糊的濾鏡 ( SVG 研究之路 (13) - filter - feGaussianBlur )，既然有模糊濾鏡，為什麼沒有銳利化的濾鏡呢？其實...

oxxo ‧ 2014-10-22

1 Like 0 留言 3341 瀏覽

鐵人賽其他技術 DAY 18

SVG 30 天 ~ 就要醬玩系列第 18 篇

技術 Day18 - 初探 SVG SMIL Animation

SVG 的動畫元素是由 W3C Synchronized Multimedia (SYMM) Working Group 由 Synchronized Mul...

oxxo ‧ 2014-10-10

1 Like 0 留言 3310 瀏覽

鐵人賽其他技術 DAY 25

SVG 30 天 ~ 就要醬玩系列第 25 篇

技術 Day25 - SVG filter - feColorMatrix

feColorMatrix 顧名思義就是色彩矩陣的濾鏡，用一個矩陣的計算，將圖片的色彩重新計算後輸出，便可以達到各種不同的色彩變化效果，在此之前，要先介紹一下...

oxxo ‧ 2014-10-17

1 Like 0 留言 3221 瀏覽

鐵人賽其他技術 DAY 7

SVG 30 天 ~ 就要醬玩系列第 7 篇

技術 Day7 - SVG Stroke-miterlimit

在之前 SVG 研究之路 (6) - stroke 邊框有介紹過邊框的用法，不過其實 Stroke 還有其他的屬性可以設定使用，以下將介紹：「stroke-...

oxxo ‧ 2014-09-29

1 Like 0 留言 3041 瀏覽

鐵人賽其他技術 DAY 27

SVG 30 天 ~ 就要醬玩系列第 27 篇

技術 Day27 - SVG filter - feComponentTransfer

feComponentTransfer 是針對圖像中每一個像素，利用公式的計算，進行亮度、對比...等調整，其實就有點類似 Photoshop 裏頭的「曲線」...

oxxo ‧ 2014-10-19

1 Like 0 留言 3007 瀏覽

鐵人賽其他技術 DAY 14

SVG 30 天 ~ 就要醬玩系列第 14 篇

技術 Day14 - SVG Clipping and Masking

使用過 Illustrator 的朋友應該都會知道，裏頭有一個重要的繪圖功能，就是剪裁和遮色片，這也是在圖形處理上頗為重要的兩個功能，而在 SVG 裏頭這兩個功...

oxxo ‧ 2014-10-06

1 Like 0 留言 2939 瀏覽

鐵人賽其他技術 DAY 24

SVG 30 天 ~ 就要醬玩系列第 24 篇

技術 Day24 - 初探 SVG filter

前面二十幾篇的 SVG 文章已經涵蓋了 SVG 的基本用法和觀念，接下來的幾天，將會開始介紹 SVG 的濾鏡 ( filter )，也將開始進入 SVG 奧妙...

oxxo ‧ 2014-10-16

1 Like 1 留言 2904 瀏覽

鐵人賽其他技術 DAY 8

SVG 30 天 ~ 就要醬玩系列第 8 篇

技術 Day8 - SVG Stroke-marker

在前兩篇都有介紹了 stroke 的用法，其實 stroke 還有另外一個特別的功能可以設定，就是「marker」，顧名思義，就是在線段的起點、中間點或結束點，...

oxxo ‧ 2014-09-30

1 Like 0 留言 2900 瀏覽

鐵人賽其他技術 DAY 16

SVG 30 天 ~ 就要醬玩系列第 16 篇

技術 Day16 - SVG transform 基礎篇

在 CSS3 裏頭，我們常常使用到 transform 這個變形的效果，同樣的，對於 SVG 來說，transform 也是重要的變形屬性，與 CSS 一模一...

oxxo ‧ 2014-10-08