国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關于svg

zsirfs / 424人閱讀

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

最近項目要使用d3,所以順便補習了一下他所需要的svg,希望對大家能有所幫助

什么是SVG

SVG 指可伸縮矢量圖形 (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

通過 標簽

標簽是 HTML 4 的標準標簽,被所有較新的瀏覽器支持。它的缺點是不允許使用腳本

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



通過 SVG 形狀

矩形

圓形

橢圓

折線

多邊形

路徑

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 不同時,可創建角形漸變















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

標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。


放射性漸變

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

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

    高璐 評論0 收藏0
  • 關于svg

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

    li21 評論0 收藏0
  • 關于Data URLs svg圖片顯示出錯和瀏覽器URL hash #

    摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數據提交至瀏覽器內部解析器我認為的模擬服務器中,所以就出現了數據丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html /cnblogs html/css/data_...

    keke 評論0 收藏0
  • 關于Data URLs svg圖片顯示出錯和瀏覽器URL hash #

    摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數據提交至瀏覽器內部解析器我認為的模擬服務器中,所以就出現了數據丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html-css/rfc2397.html /cnblogs html-css/data_...

    iflove 評論0 收藏0
  • 關于Data URLs svg圖片顯示出錯和瀏覽器URL hash #

    摘要:而它們在處理時將后面的字符串當做為位置標識符,沒有將后數據提交至瀏覽器內部解析器我認為的模擬服務器中,所以就出現了數據丟失解析異常。以上分析純屬個人猜測。在使用生成的svg圖作為 img 標簽是src值時,發現有部分瀏覽器顯示異常,所以這里記錄下 參考鏈接 Data URLs /cnblogs html/css/rfc2397.html https://developer.mozil...

    Jason 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<