成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于svg

li21 / 495人閱讀

摘要:通過(guò)標(biāo)簽標(biāo)簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。

最近項(xiàng)目要使用d3,所以順便補(bǔ)習(xí)了一下他所需要的svg,希望對(duì)大家能有所幫助

什么是SVG

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG 用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形

SVG 使用 XML 格式定義圖形

SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失

SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)

SVG 與諸如 DOM 和 XSL 之類(lèi)的 W3C 標(biāo)準(zhǔn)是一個(gè)整體

SVG 是W3C 推薦標(biāo)準(zhǔn)

SVG 的歷史和優(yōu)勢(shì)

在 2003 年一月,SVG 1.1 被確立為 W3C 標(biāo)準(zhǔn)。

參與定義 SVG 的組織有:太陽(yáng)微系統(tǒng)、Adobe、蘋(píng)果公司、IBM 以及柯達(dá)。

與其他圖像格式相比,使用 SVG 的優(yōu)勢(shì)在于:

SVG 可被非常多的工具讀取和修改(比如記事本)

SVG 與 JPEG 和 GIF 圖像比起來(lái),尺寸更小,且可壓縮性更強(qiáng)。

SVG 是可伸縮的

SVG 圖像可在任何的分辨率下被高質(zhì)量地打印

SVG 可在圖像質(zhì)量不下降的情況下被放大

SVG 圖像中的文本是可選的,同時(shí)也是可搜索的(很適合制作地圖)

SVG 可以與 Java 技術(shù)一起運(yùn)行

SVG 是開(kāi)放的標(biāo)準(zhǔn)

SVG 文件是純粹的 XML

SVG 的主要競(jìng)爭(zhēng)者是 Flash。

與 Flash 相比,SVG 最大的優(yōu)勢(shì)是與其他標(biāo)準(zhǔn)(比如 XSL 和 DOM)相兼容。而 Flash 則是未開(kāi)源的私有技術(shù)。

SVG引入HTML的幾種方式

通過(guò) 標(biāo)簽

標(biāo)簽是被所有主流瀏覽器支持并被使用的腳本,被Adobe SVG Viewer 所推薦,但不能適用于合法的XHTML文件中,因?yàn)?b>標(biāo)簽并不存在于HTML規(guī)范中

pluginspage 屬性指向下載插件的 URL

通過(guò) 標(biāo)簽

標(biāo)簽是 HTML 4 的標(biāo)準(zhǔn)標(biāo)簽,被所有較新的瀏覽器支持。它的缺點(diǎn)是不允許使用腳本

codebase 屬性指向下載插件的 URL。



通過(guò) SVG 形狀

矩形

圓形

橢圓

線(xiàn)

折線(xiàn)

多邊形

路徑

SVG標(biāo)簽

代碼解析








width 和 height 屬性可定義矩形的高度和寬度

style 屬性用來(lái)定義 CSS 屬性,

x 屬性定義矩形的左側(cè)位置(例如,x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px)

y 屬性定義矩形的頂端位置(例如,y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px)

rx 和 ry 屬性可使矩形產(chǎn)生圓角。


CSS 的 fill 屬性定義矩形的填充顏色(rgb 值、顏色名或者十六進(jìn)制值)

CSS 的 stroke-width 屬性定義矩形邊框的寬度

CSS 的 stroke 屬性定義矩形邊框的顏色

CSS 的 fill-opacity 屬性定義填充顏色透明度(合法的范圍是:0 - 1)

CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度(合法的范圍是:0 - 1)

CSS 的 opacity 屬性定義整個(gè)元素的透明值(合法的范圍是:0 - 1)


圓形

cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy,圓的中心會(huì)被設(shè)置為 (0, 0)

r 屬性定義圓的半徑。


橢圓形

cx 屬性定義圓點(diǎn)的 x 坐標(biāo)

cy 屬性定義圓點(diǎn)的 y 坐標(biāo)

rx 屬性定義水平半徑

ry 屬性定義垂直半徑


線(xiàn)條

x1 屬性在 x 軸定義線(xiàn)條的開(kāi)始

y1 屬性在 y 軸定義線(xiàn)條的開(kāi)始

x2 屬性在 x 軸定義線(xiàn)條的結(jié)束

y2 屬性在 y 軸定義線(xiàn)條的結(jié)束


多邊形

用法 points="220,100 300,210 170,250"

points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)


折線(xiàn)

用來(lái)創(chuàng)建僅包含直線(xiàn)的形狀

points="0,0 0,20 20,20 20,40 40,40 40,60"

points 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)


路徑

下面的命令可用于路徑數(shù)據(jù):

M = moveto

L = lineto

H = horizontal lineto 平行線(xiàn)

V = vertical lineto 垂線(xiàn)

C = curveto 三次貝爾塞爾曲線(xiàn)

S = smooth curveto

Q = quadratic Belzier curve 二次貝塞爾曲線(xiàn)

T = smooth quadratic Belzier curveto

A = elliptical Arc 圓

Z = closepath 閉合路徑

直接看圖吧 使用方法和功能已經(jīng)很詳細(xì)了

SVG漸變

SVG 漸變必須在 標(biāo)簽中進(jìn)行定義。

在 SVG 中,有兩種主要的漸變類(lèi)型:

線(xiàn)性漸變

放射性漸變


線(xiàn)性漸變

線(xiàn)性漸變可被定義為水平、垂直或角形的漸變:

當(dāng) y1 和 y2 相等,而 x1 和 x2 不同時(shí),可創(chuàng)建水平漸變

當(dāng) x1 和 x2 相等,而 y1 和 y2 不同時(shí),可創(chuàng)建垂直漸變

當(dāng) x1 和 x2 不同,且 y1 和 y2 不同時(shí),可創(chuàng)建角形漸變















標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱(chēng)
fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變

標(biāo)簽的 x1、x2、y1、y2 屬性可定義漸變的開(kāi)始和結(jié)束位置
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過(guò)一個(gè) 標(biāo)簽來(lái)規(guī)定。offset 屬性用來(lái)定義漸變的開(kāi)始和結(jié)束位置。



放射性漸變

cx、cy 和 r 屬性定義外圈

fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。

每種顏色通過(guò)一個(gè) 標(biāo)簽來(lái)規(guī)定。

offset 屬性用來(lái)定義漸變的開(kāi)始和結(jié)束位置。





























ok 基本上所有的SVG都在這里了希望對(duì)大家有多幫助

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/50796.html

相關(guān)文章

  • 關(guān)于svg

    摘要:通過(guò)標(biāo)簽標(biāo)簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。 最近項(xiàng)目要使用d3,所以順便補(bǔ)習(xí)了一下他所需要的svg,希望對(duì)大家能有所幫助 什么是SVG SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變...

    zsirfs 評(píng)論0 收藏0
  • 關(guān)于svg

    摘要:通過(guò)標(biāo)簽標(biāo)簽可工作在大部分的瀏覽器中。放射性漸變和屬性定義外圈和定義內(nèi)圈漸變的顏色范圍可由兩種或多種顏色組成。 最近項(xiàng)目要使用d3,所以順便補(bǔ)習(xí)了一下他所需要的svg,希望對(duì)大家能有所幫助 什么是SVG SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變...

    高璐 評(píng)論0 收藏0
  • 關(guān)于Data URLs svg圖片顯示出錯(cuò)和瀏覽器URL hash #

    摘要:而它們?cè)谔幚頃r(shí)將后面的字符串當(dāng)做為位置標(biāo)識(shí)符,沒(méi)有將后數(shù)據(jù)提交至瀏覽器內(nèi)部解析器我認(rèn)為的模擬服務(wù)器中,所以就出現(xiàn)了數(shù)據(jù)丟失解析異常。以上分析純屬個(gè)人猜測(cè)。在使用生成的svg圖作為 img 標(biāo)簽是src值時(shí),發(fā)現(xiàn)有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html /cnblogs html/css/data_...

    keke 評(píng)論0 收藏0
  • 關(guān)于Data URLs svg圖片顯示出錯(cuò)和瀏覽器URL hash #

    摘要:而它們?cè)谔幚頃r(shí)將后面的字符串當(dāng)做為位置標(biāo)識(shí)符,沒(méi)有將后數(shù)據(jù)提交至瀏覽器內(nèi)部解析器我認(rèn)為的模擬服務(wù)器中,所以就出現(xiàn)了數(shù)據(jù)丟失解析異常。以上分析純屬個(gè)人猜測(cè)。在使用生成的svg圖作為 img 標(biāo)簽是src值時(shí),發(fā)現(xiàn)有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html-css/rfc2397.html /cnblogs html-css/data_...

    iflove 評(píng)論0 收藏0
  • 關(guān)于Data URLs svg圖片顯示出錯(cuò)和瀏覽器URL hash #

    摘要:而它們?cè)谔幚頃r(shí)將后面的字符串當(dāng)做為位置標(biāo)識(shí)符,沒(méi)有將后數(shù)據(jù)提交至瀏覽器內(nèi)部解析器我認(rèn)為的模擬服務(wù)器中,所以就出現(xiàn)了數(shù)據(jù)丟失解析異常。以上分析純屬個(gè)人猜測(cè)。在使用生成的svg圖作為 img 標(biāo)簽是src值時(shí),發(fā)現(xiàn)有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html https://developer.mozil...

    Jason 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<