1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!DOCTYPE HTML> < html >
< body >
< svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" width = "1000px" height = "800px" >
< rect
x = "20" y = "20" rx = "20" ry = "20" width = "250" height = "100" style = "fill:red;stroke:black;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
< circle cx = "100" cy = "160" r = "40" stroke = "black"
stroke-width = "2" fill = "red"
style = "fill:green;opacity:0.5" />
< ellipse cx = "240" cy = "230" rx = "220" ry = "30" style = "fill:purple" />
< ellipse cx = "220" cy = "270" rx = "190" ry = "20" style = "fill:lime" />
< ellipse cx = "210" cy = "345" rx = "170" ry = "15" style = "fill:yellow" />
< line x1 = "0" y1 = "0" x2 = "300" y2 = "300" style = "stroke:rgb(99,99,99);stroke-width:2" />
< polygon points = "220,400 300,610 170,650 123,434" style = "fill:#cccccc; stroke:#000000;stroke-width:1" />
< polyline points = "400,0 400,20 420,20 420,40 440,40 440,60" style = "fill:white;stroke:red;stroke-width:2" />
< path d="M153 334
C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314 C142 314 131 322 131 334 C131 350 142 364 156 364 C175 364 191 350 191 334 C191 311 175 294 156 294 C131 294 111 311 111 334 C111 361 131 384 156 384 C186 384 211 361 211 334 C411 300 886 674 500 600" style = "stroke:red;stroke-width:2" />
< defs >
< filter id = "Gaussian_Blur" >
< feGaussianBlur in = "SourceGraphic" stdDeviation = "20" />
</ filter >
</ defs >
< ellipse cx = "500" cy = "150" rx = "70" ry = "40"
style = "fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)" />
< defs >
< linearGradient id = "orange_red" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%" >
< stop offset = "0%" style = "stop-color:rgb(255,255,0);stop-opacity:1" />
< stop offset = "100%" style = "stop-color:rgb(255,0,0);stop-opacity:1" />
</ linearGradient >
</ defs >
< ellipse cx = "720" cy = "190" rx = "85" ry = "55" style = "fill:url(#orange_red)" />
< defs >
< radialGradient id = "grey_blue" cx = "50%" cy = "50%" r = "80%" fx = "50%" fy = "50%" >
< stop offset = "0%" style = "stop-color:rgb(200,200,200);stop-opacity:0" />
< stop offset = "100%" style = "stop-color:rgb(0,0,255);stop-opacity:1" />
</ radialGradient >
</ defs >
< ellipse cx = "750" cy = "400" rx = "110" ry = "100" style = "fill:url(#grey_blue)" />
</ svg >
</ body >
</ html >
|
html5SVG塗鴉
本文轉自 antlove 51CTO部落格,原文連結:http://blog.51cto.com/antlove/1663603
相關文章
- Canvas畫圖-滑鼠塗鴉Canvas
- iOS 畫板 塗鴉 答題iOS
- 自定義view————塗鴉畫板View
- 線上直播系統原始碼,實現在圖片上塗鴉並記錄塗鴉軌跡原始碼
- 【塗鴉物聯網足跡】塗鴉雲平臺資料型別和取值約束說明資料型別
- 塗鴉智慧物聯網平臺初探
- Google生日塗鴉/Doodle中的祕密Go
- Google塗鴉幕後團隊揭祕Go
- 專案需求討論:截圖—塗鴉—分享
- 塗鴉智慧選型 TiKV 的心路歷程
- 神筆馬良——基於 OpenGL 的塗鴉框架框架
- 用Delphi編寫塗鴉桌面的小程式 (轉)
- 使用Unity著色器實現精靈(Sprite)塗鴉效果Unity
- Android 帶你擼一個好玩的塗鴉 ViewAndroidView
- 設計一個基於svg的塗鴉元件(一)SVG元件
- 塗鴉智慧上市IPO招股書及簡要資料
- 用Flutter實現一個塗鴉和加水印功能Flutter
- 劍與冒險——中世紀主題塗鴉組圖
- HarmonyOS 的分散式技術,讓小朋友愛上塗鴉分散式
- 互動塗鴉兒童遊戲主要的實現形式介紹遊戲
- canvas 塗鴉畫板,支援筆寫、手寫、滑鼠繪圖Canvas繪圖
- canvas實現的簡單塗鴉板程式碼例項Canvas
- 塗鴉智慧 dubbo-go 億級流量的實踐與探索Go
- 不同場所應用的互動塗鴉有哪些優點?
- 塗鴉人工智慧進一步打造共贏平臺人工智慧
- 趣文:程式設計師的日常生活(塗鴉組圖)程式設計師
- Google首頁塗鴉致敬 WWW全球資訊網發明30週年Go
- 塗鴉雲平臺資料型別和取值約束說明資料型別
- 【塗鴉物聯網足跡】物聯網基礎介紹篇
- 互動塗鴉軟體在展廳中使用的特點分析
- 製作一個有趣的塗鴉物聯網小專案(塗鴉模組SDK開發 CBU BK7231N WiFi+藍芽模組 HSV彩色控制)WiFi藍芽模組
- Android塗鴉畫板原理詳解——從初級到高階(二)Android
- tp5+ionic+flash2x+annie.js微信公眾號塗鴉遊戲JS遊戲
- Android塗鴉畫板原理詳解——從初級到高階(一)Android
- Android仿微信圖片編輯——塗鴉框架Doodle(多功能畫板)Android框架
- 從零到 Go:Google感恩節火雞塗鴉開發紀實Go
- 塗鴉智慧&Gartner:2021全球AIoT開發者生態白皮書(附下載)AI
- 【UWP開源】圖片編輯器,帶貼圖、濾鏡、塗鴉等功能