使用者討論:張鈞祺:修訂版本之間的差異
出自六年制學程
(→5.3 三、文字) |
(→5.3 三、文字) |
||
第 21 行: | 第 21 行: | ||
====5.2 二、基本架構==== | ====5.2 二、基本架構==== | ||
====5.3 三、文字==== | ====5.3 三、文字==== | ||
+ | svg文字範例 | ||
<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E5%BC%B5%E9%88%9E%E7%A5%BA.svg"> | <img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E5%BC%B5%E9%88%9E%E7%A5%BA.svg"> | ||
+ | |||
+ | 內碼 | ||
<pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> | <pre><?xml version='1.0' encoding='UTF-8' standalone='no'?> |
2018年1月16日 (二) 11:20的修訂版本
1 環境以工具
1.1 一、環境
1.2 二、工具與設定
firefox filezilla EmEditor
2 HTML與HTTP
3 wiki
4 CSS
5 SVG
5.1 一、概述
1:開啟fielzilla,連線至自己的站台管理員
2:home>www>SVG,在這個資料夾中,建立新檔案。
3:命名,然後記得要加入副檔名.svg
4:寫入程式碼。
5.2 二、基本架構
5.3 三、文字
svg文字範例
內碼
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'> <<text x='40' y='50' style='font-family:kaiti;fill:#00ff00'>張</text> <<text x='55' y='50' style='font-family:kaiti;fill:#ff0000'>鈞</text> <<text x='70' y='50' style='font-family:kaiti;fill:#0000ff'>祺</text> <</svg>
5.4 四、位移、旋轉、縮放、歪斜
5.5 五、群組
5.6 六、定義一次,引用多次
5.7 七、漸層
5.7.1 (一)線性漸層
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='500'> <defs> <linearGradient id='LG' x1='50%' y1='0%' x2='0%' y2='50%'> <stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' /> <stop offset='100%' style='stop-color:#00FFFF;stop-opacity:1' /> </linearGradient> </defs> <rect width='500' height='500' x='0' y='0' stroke='red' fill='url(#LG)' /> <</svg>
5.7.2 (二)放射漸層
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='750' height='750'> <defs> <radialGradient id='r2' cx='50%' cy='50%' r='50%'> <stop offset='0%' stop-color='#99FFFF'></stop> <stop offset='30%' stop-color='#66FFFF'></stop> <stop offset='70%' stop-color=' #5599FF '></stop> <stop offset='100%' stop-color='#0000FF'></stop> </radialGradient> </defs> <circle cx='200' cy='200' r='200' fill='url(#r2)'/> <</svg>
5.8 八、柔焦濾鏡
5.9 九、path
5.10 十、動畫
6 Inkscape
7 GIS
GIS基本指令
<meta content='text/html;charset=utf-8' http-equiv='Content-Type'> <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script> <script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script> <script> $(function(){ $('#map').goMap({ zoom:17, markers:[ ], }); }); </script> <<div align=center id='map' style='height:550px; width:900px;'>239新北市鶯歌區永明街58號</div>