iT邦幫忙

svg相關文章
共有 39 則文章
鐵人賽 Modern Web DAY 26
鉄人28号FX 系列 第 26

技術 鉄人28号FX 鉄人26号「路徑鳥」SVG <path> <textPath> <defs>

★ 地圖雷奧鎮市中心 ↓↓↓ 傳送卷軸,建議先向 鉄人25号「圖形鹿」獲得幫助,此為雷奧鎮續文。 顯示雷奧鎮街上位置圖 :這簡直就像是一直合理存在著。 雷奧鎮小...

鐵人賽 Modern Web DAY 25
鉄人28号FX 系列 第 25

技術 鉄人28号FX 鉄人25号「圖形鹿」SVG <text> <tspan>

★ 地圖雷奧鎮市中心 ↓↓↓ 真不可思議~ 明明普通不過的街景, 為何隱藏這麼多無法理解的事情。 顯示雷奧鎮街上位置圖 雷奧鎮小巷 [???]: 小子。果然村長...

技術 SVG - 進階功能介紹

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

技術 SVG - 基礎圖形與樣式

SVG ( Scalable Vector Graphics ) 是 XML 的格式,可以用來繪製向量圖形,相較圖片來說,放大縮小時不會糊掉,適合使用在不需豐富...

鐵人賽 Modern Web DAY 19
CSS Secrets 導讀 系列 第 19

技術 Secret 14: 簡單的圓餅圖 (SVG)

SVG讓許多圖像的工作變簡單,製作圓餅圖也不例外。然而與其用路徑畫圓餅圖,我們要用一個小技巧。 先從一個圓形開始: <svg width="10...

鐵人賽 自我挑戰組 DAY 18

技術 [蛻變事實/D18] 設計師勇闖前端城-(學習記:CSS背景圖SVG檔換色)

最近切的版,圖都是SVG格式 今天處理footer區塊 才發現我手中沒有footer 區塊需要的白色Logo啊~~~! 面對此問題我可以有二個做法: 打開P...

鐵人賽 Modern Web DAY 15
CSS Secrets 導讀 系列 第 15

技術 Secret 12: 截角效果 (inline SVG)

雖然 CSS gradient 的方法可以用,不過它的程式碼是冗長的,需求變更時要做多個地方調整,好在我們還有其他的方法,其中一種是用border-image配...

鐵人賽 Modern Web DAY 16
前端「設計」聖光之路 系列 第 16

技術 SVG 輸出注意事項

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

鐵人賽 Modern Web DAY 14
前端「設計」聖光之路 系列 第 14

技術 網頁圖片格式的運用

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

鐵人賽 其他技術 DAY 30
SVG 30 天 ~ 就要醬玩 系列 第 31

技術 Day30+1 - SVG filter - feConvolveMatrix

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

鐵人賽 其他技術 DAY 30
SVG 30 天 ~ 就要醬玩 系列 第 30

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

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

鐵人賽 其他技術 DAY 29
SVG 30 天 ~ 就要醬玩 系列 第 29

技術 Day29 - SVG filter - feDisplacementMap

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

鐵人賽 開發技術 DAY 26

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

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

鐵人賽 其他技術 DAY 28
SVG 30 天 ~ 就要醬玩 系列 第 28

技術 Day28 - SVG filter - feImage

feImage 是 SVG filter 裏頭最簡單的濾鏡,不過為什麼要用一篇文章專門介紹它呢?就是因為 feImage 可以幫助我們更實際的了解 filte...

鐵人賽 其他技術 DAY 27
SVG 30 天 ~ 就要醬玩 系列 第 27

技術 Day27 - SVG filter - feComponentTransfer

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

鐵人賽 其他技術 DAY 26
SVG 30 天 ~ 就要醬玩 系列 第 26

技術 Day26 - SVG filter - feGaussianBlur

使用過 Photoshop 都知道,模糊就跟斯斯一樣多種,其中的一種就是「高斯模糊」,同樣的,在 illustrator 裏頭也有高斯模糊,因此 SVG 也就擁...

鐵人賽 其他技術 DAY 25
SVG 30 天 ~ 就要醬玩 系列 第 25

技術 Day25 - SVG filter - feColorMatrix

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

鐵人賽 其他技術 DAY 24
SVG 30 天 ~ 就要醬玩 系列 第 24

技術 Day24 - 初探 SVG filter

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

鐵人賽 其他技術 DAY 23
SVG 30 天 ~ 就要醬玩 系列 第 23

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

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

鐵人賽 其他技術 DAY 22
SVG 30 天 ~ 就要醬玩 系列 第 22

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

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

鐵人賽 其他技術 DAY 21
SVG 30 天 ~ 就要醬玩 系列 第 21

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

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

鐵人賽 其他技術 DAY 20
SVG 30 天 ~ 就要醬玩 系列 第 20

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

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

鐵人賽 其他技術 DAY 19
SVG 30 天 ~ 就要醬玩 系列 第 19

技術 Day19 - 深入理解 SVG SMIL Animation

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

鐵人賽 其他技術 DAY 18
SVG 30 天 ~ 就要醬玩 系列 第 18

技術 Day18 - 初探 SVG SMIL Animation

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

鐵人賽 其他技術 DAY 17
SVG 30 天 ~ 就要醬玩 系列 第 17

技術 Day17 - SVG transform Matrix

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

鐵人賽 其他技術 DAY 16
SVG 30 天 ~ 就要醬玩 系列 第 16

技術 Day16 - SVG transform 基礎篇

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

鐵人賽 其他技術 DAY 15
SVG 30 天 ~ 就要醬玩 系列 第 15

技術 Day15 - 再談 SVG defs

在前面的 SVG 研究之路裡,不斷看到 defs 這個元素的身影,從顏色的填充、線段的圖案、濾鏡的定義...等許多的效果,都必須使用 defs 來定義,因此就直...

鐵人賽 其他技術 DAY 14
SVG 30 天 ~ 就要醬玩 系列 第 14

技術 Day14 - SVG Clipping and Masking

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

鐵人賽 其他技術 DAY 13
SVG 30 天 ~ 就要醬玩 系列 第 13

技術 Day13 - SVG text 文字

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

鐵人賽 其他技術 DAY 12
SVG 30 天 ~ 就要醬玩 系列 第 12

技術 Day12 - 有趣的 SVG Patterns

Patterns 是 SVG fill 裏頭的一個有趣元素,記得在 CSS 裏頭,我們可以自訂背景的圖案,達到許多很有特色的變化,然而在 SVG 也是如此,而...