摘要:通過標簽標簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。
最近項目要使用d3,所以順便補習了一下他所需要的svg,希望對大家能有所幫助
什么是SVGSVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
SVG 是W3C 推薦標準
SVG 的歷史和優(yōu)勢在 2003 年一月,SVG 1.1 被確立為 W3C 標準。
參與定義 SVG 的組織有:太陽微系統(tǒng)、Adobe、蘋果公司、IBM 以及柯達。
與其他圖像格式相比,使用 SVG 的優(yōu)勢在于:
SVG 可被非常多的工具讀取和修改(比如記事本)
SVG 與 JPEG 和 GIF 圖像比起來,尺寸更小,且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
SVG 圖像中的文本是可選的,同時也是可搜索的(很適合制作地圖)
SVG 可以與 Java 技術(shù)一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
SVG 的主要競爭者是 Flash。
與 Flash 相比,SVG 最大的優(yōu)勢是與其他標準(比如 XSL 和 DOM)相兼容。而 Flash 則是未開源的私有技術(shù)。
SVG引入HTML的幾種方式通過 標簽
標簽是被所有主流瀏覽器支持并被使用的腳本,被Adobe SVG Viewer 所推薦,但不能適用于合法的XHTML文件中,因為標簽并不存在于HTML規(guī)范中
pluginspage 屬性指向下載插件的 URL
通過 標簽
codebase 屬性指向下載插件的 URL。
通過 標簽
標簽可工作在大部分的瀏覽器中。
SVG 形狀矩形
圓形
橢圓
線
折線
多邊形
路徑
代碼解析
width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性,
x 屬性定義矩形的左側(cè)位置(例如,x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px)
y 屬性定義矩形的頂端位置(例如,y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px)
rx 和 ry 屬性可使矩形產(chǎn)生圓角。
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,圓的中心會被設(shè)置為 (0, 0)
r 屬性定義圓的半徑。
cx 屬性定義圓點的 x 坐標
cy 屬性定義圓點的 y 坐標
rx 屬性定義水平半徑
ry 屬性定義垂直半徑
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結(jié)束
y2 屬性在 y 軸定義線條的結(jié)束
用法 points="220,100 300,210 170,250"
points 屬性定義多邊形每個角的 x 和 y 坐標
用來創(chuàng)建僅包含直線的形狀
points="0,0 0,20 20,20 20,40 40,40 40,60"
points 屬性定義多邊形每個角的 x 和 y 坐標
下面的命令可用于路徑數(shù)據(jù):
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 閉合路徑
直接看圖吧 使用方法和功能已經(jīng)很詳細了
SVG漸變SVG 漸變必須在
在 SVG 中,有兩種主要的漸變類型:
線性漸變
放射性漸變
線性漸變可被定義為水平、垂直或角形的漸變:
當 y1 和 y2 相等,而 x1 和 x2 不同時,可創(chuàng)建水平漸變
當 x1 和 x2 相等,而 y1 和 y2 不同時,可創(chuàng)建垂直漸變
當 x1 和 x2 不同,且 y1 和 y2 不同時,可創(chuàng)建角形漸變
fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個
cx、cy 和 r 屬性定義外圈
fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。
每種顏色通過一個
offset 屬性用來定義漸變的開始和結(jié)束位置。
ok 基本上所有的SVG都在這里了希望對大家有多幫助
SVG資料:http://www.w3school.com.cn/sv...
https://developer.mozilla.org/zh-CN/docs/Web/SVG
SVG工具:http://editor.method.ac/
SVG工具使用
生成的下述文件可以根據(jù)上述內(nèi)容去尋找自己想用的部分或整體去選用
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83087.html
摘要:通過標簽標簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。 最近項目要使用d3,所以順便補習了一下他所需要的svg,希望對大家能有所幫助 什么是SVG SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變...
摘要:通過標簽標簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。 最近項目要使用d3,所以順便補習了一下他所需要的svg,希望對大家能有所幫助 什么是SVG SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變...
摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數(shù)據(jù)提交至瀏覽器內(nèi)部解析器我認為的模擬服務(wù)器中,所以就出現(xiàn)了數(shù)據(jù)丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發(fā)現(xiàn)有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html /cnblogs html/css/data_...
摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數(shù)據(jù)提交至瀏覽器內(nèi)部解析器我認為的模擬服務(wù)器中,所以就出現(xiàn)了數(shù)據(jù)丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發(fā)現(xiàn)有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html-css/rfc2397.html /cnblogs html-css/data_...
摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數(shù)據(jù)提交至瀏覽器內(nèi)部解析器我認為的模擬服務(wù)器中,所以就出現(xiàn)了數(shù)據(jù)丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發(fā)現(xiàn)有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html https://developer.mozil...
閱讀 2867·2021-07-30 15:30
閱讀 562·2019-08-30 15:55
閱讀 1631·2019-08-26 17:04
閱讀 642·2019-08-26 11:36
閱讀 2082·2019-08-26 10:58
閱讀 3562·2019-08-23 14:34
閱讀 1566·2019-08-22 18:48
閱讀 2533·2019-08-21 17:51