摘要:通過標簽標簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內圈漸變的顏色范圍可由兩種或多種顏色組成。
最近項目要使用d3,所以順便補習了一下他所需要的svg,希望對大家能有所幫助
什么是SVGSVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
SVG 是W3C 推薦標準
SVG 的歷史和優勢在 2003 年一月,SVG 1.1 被確立為 W3C 標準。
參與定義 SVG 的組織有:太陽微系統、Adobe、蘋果公司、IBM 以及柯達。
與其他圖像格式相比,使用 SVG 的優勢在于:
SVG 可被非常多的工具讀取和修改(比如記事本)
SVG 與 JPEG 和 GIF 圖像比起來,尺寸更小,且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的,同時也是可搜索的(很適合制作地圖)
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
SVG 的主要競爭者是 Flash。
與 Flash 相比,SVG 最大的優勢是與其他標準(比如 XSL 和 DOM)相兼容。而 Flash 則是未開源的私有技術。
SVG引入HTML的幾種方式通過 標簽
標簽是被所有主流瀏覽器支持并被使用的腳本,被Adobe SVG Viewer 所推薦,但不能適用于合法的XHTML文件中,因為標簽并不存在于HTML規范中
pluginspage 屬性指向下載插件的 URL
通過 標簽
codebase 屬性指向下載插件的 URL。
通過 標簽
標簽可工作在大部分的瀏覽器中。
SVG 形狀矩形
圓形
橢圓
線
折線
多邊形
路徑
代碼解析
width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性,
x 屬性定義矩形的左側位置(例如,x="0" 定義矩形到瀏覽器窗口左側的距離是 0px)
y 屬性定義矩形的頂端位置(例如,y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px)
rx 和 ry 屬性可使矩形產生圓角。
CSS 的 fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進制值)
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
CSS 的 fill-opacity 屬性定義填充顏色透明度(合法的范圍是:0 - 1)
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度(合法的范圍是:0 - 1)
CSS 的 opacity 屬性定義整個元素的透明值(合法的范圍是:0 - 1)
cx 和 cy 屬性定義圓點的 x 和 y 坐標。如果省略 cx 和 cy,圓的中心會被設置為 (0, 0)
r 屬性定義圓的半徑。
cx 屬性定義圓點的 x 坐標
cy 屬性定義圓點的 y 坐標
rx 屬性定義水平半徑
ry 屬性定義垂直半徑
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束
用法 points="220,100 300,210 170,250"
points 屬性定義多邊形每個角的 x 和 y 坐標
用來創建僅包含直線的形狀
points="0,0 0,20 20,20 20,40 40,40 40,60"
points 屬性定義多邊形每個角的 x 和 y 坐標
下面的命令可用于路徑數據:
M = moveto
L = lineto
H = horizontal lineto 平行線
V = vertical lineto 垂線
C = curveto 三次貝爾塞爾曲線
S = smooth curveto
Q = quadratic Belzier curve 二次貝塞爾曲線
T = smooth quadratic Belzier curveto
A = elliptical Arc 圓
Z = closepath 閉合路徑
直接看圖吧 使用方法和功能已經很詳細了
SVG漸變SVG 漸變必須在
在 SVG 中,有兩種主要的漸變類型:
線性漸變
放射性漸變
線性漸變可被定義為水平、垂直或角形的漸變:
當 y1 和 y2 相等,而 x1 和 x2 不同時,可創建水平漸變
當 x1 和 x2 相等,而 y1 和 y2 不同時,可創建垂直漸變
當 x1 和 x2 不同,且 y1 和 y2 不同時,可創建角形漸變
fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個
cx、cy 和 r 屬性定義外圈
fx 和 fy 定義內圈 漸變的顏色范圍可由兩種或多種顏色組成。
每種顏色通過一個
offset 屬性用來定義漸變的開始和結束位置。
ok 基本上所有的SVG都在這里了希望對大家有多幫助
SVG資料:http://www.w3school.com.cn/sv...
https://developer.mozilla.org/zh-CN/docs/Web/SVG
SVG工具:http://editor.method.ac/
SVG工具使用
生成的下述文件可以根據上述內容去尋找自己想用的部分或整體去選用
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112009.html
摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數據提交至瀏覽器內部解析器我認為的模擬服務器中,所以就出現了數據丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html /cnblogs html/css/data_...
摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數據提交至瀏覽器內部解析器我認為的模擬服務器中,所以就出現了數據丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html-css/rfc2397.html /cnblogs html-css/data_...
摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數據提交至瀏覽器內部解析器我認為的模擬服務器中,所以就出現了數據丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html https://developer.mozil...
閱讀 3826·2021-11-25 09:43
閱讀 2170·2021-11-23 10:11
閱讀 1396·2021-09-29 09:35
閱讀 1309·2021-09-24 10:31
閱讀 2035·2019-08-30 15:48
閱讀 2353·2019-08-29 15:28
閱讀 425·2019-08-29 12:36
閱讀 3490·2019-08-28 18:12