SVG 參考手冊
1. SVG元素模塊
2.SVG解釋的元素 2.1 超連接模塊
3、SVG模塊屬性 3.1 動畫屬性集
3.21 XLink 屬性模塊
4、SVG解釋的屬性 4.1 內核屬性模塊
4.2 圖形屬性模塊
|
SVG 元素
| 元素 | 說明 | 屬性 |
|---|---|---|
| <a> | 建立一個SVG元素周圍連接 | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | 容許對象性文字進行控制，來呈現特殊的字符數據 | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | 定義一系列象性符號的替換 | id |
| <altGlyphItem> | 定義一系列候選的象性符號的替換 | id |
| <animate> | 隨時間動態改變屬性 | attributeName="目標屬性名稱" from="起始值" to="結束值" dur="持續時間" repeatCount="動畫時間將發生" |
| <animateColor> | 定義隨着時間的推移顏色轉換 | by="相對偏移值" from="起始值" to="結束值" |
| <animateMotion> | 使元素沿着動做路徑移動 | calcMode="動畫的插補模式。能夠是'discrete', 'linear', 'paced', 'spline'" path="運動路徑" keyPoints="沿運動路徑的對象目前時間應移動多遠" rotate="應用旋轉變換" xlink:href="一個URI引用<path>元素，它定義運動路徑" |
| <animateTransform> | 動畫上一個目標元素變換屬性，從而使動畫控制平移，縮放，旋轉或傾斜 | by="相對偏移值" from="起始值" to="結束值" type="類型的轉換其值是隨時間變化。能夠是 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | 定義一個圓 | cx="圓的x軸座標" cy="圓的y軸座標" r="圓的半徑". 必需. + 顯現屬性：顏色，FillStroke，圖形 |
| <clipPath> | 用於隱藏位於剪切路徑之外的對象部分。定義繪製什麼和什麼不繪製的模具被稱爲剪切路徑 | clip-path="引用剪貼路徑和引用剪貼路徑交叉" clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二個值childern一個對象的邊框，會使用掩碼的一小部分單位（默認："userSpaceOnUse"）" |
| <color-profile> | 指定顏色配置文件的說明（使用CSS樣式文件時） | local="本地存儲顏色配置文件惟一ID" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="ICC配置文件資源URI" |
| <cursor> | 定義一個獨立於平臺的自定義光標 | x="x軸左上角光標（默認爲0）" y="y軸的左上角光標（默認爲0）" xlink:href="使用光標圖像URI |
| <defs> | 引用的元素容器 | |
| <desc> | 對 SVG 中的元素的純文本描述 - 並不做爲圖形的一部分來顯示。用戶代理會將其顯示爲工具提示 | |
| <ellipse> | 定義一個橢圓 | cx="橢圓x軸座標" cy="橢圓y軸座標" rx="沿x軸橢圓形的半徑"。必需。 ry="沿y軸長橢圓形的半徑"。必需。 + 顯現屬性：顏色，FillStroke，圖形 |
| <feBlend> | 使用不一樣的混合模式把兩個對象合成在一塊兒 | mode="圖像混合模式：normal|multiply|screen|darken|lighten" in="標識爲給定的濾鏡原始輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="第二輸入圖像的混合操做" |
| feColorMatrix | SVG濾鏡。適用矩陣轉換 | |
| feComponentTransfer | SVG 濾鏡。執行數據的 component-wise 重映射 | |
| feComposite | SVG 濾鏡 | |
| feConvolveMatrix | SVG 濾鏡 | |
| feDiffuseLighting | SVG 濾鏡 | |
| feDisplacementMap | SVG 濾鏡 | |
| feDistantLight | SVG濾鏡。定義一個光源 | |
| feFlood | SVG濾鏡 | |
| feFuncA | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feFuncB | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feFuncG | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feFuncR | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feGaussianBlur | SVG濾鏡。執行高斯模糊圖像 | |
| feImage | SVG濾鏡。 | |
| feMerge | SVG濾鏡。創建在彼此頂部圖像層 | |
| feMergeNode | SVG 濾鏡。feMerge的子元素 | |
| feMorphology | SVG 濾鏡。 對源圖形執行"fattening" 或者 "thinning" | |
| feOffset | SVG濾鏡。相對其當前位置移動圖像 | |
| fePointLight | SVG濾鏡 | |
| feSpecularLighting | SVG濾鏡 | |
| feSpotLight | SVG濾鏡 | |
| feTile | SVG濾鏡 | |
| feTurbulence | SVG濾鏡 | |
| filter | 濾鏡效果的容器 | |
| font | 定義字體 | |
| font-face | 描述一種字體的特色 | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | 用於把相關元素進行組合的容器元素 | id="該組的名稱" fill="該組填充顏色" opacity="該組不透明度" + 顯現屬性: All |
| glyph | 爲給定的象形符號定義圖形 | |
| glyphRef | 定義要使用的可能的象形符號 | |
| hkern | ||
| <image> | 定義圖像 | x="圖像的左上角的x軸座標" y="圖像的左上角的y軸座標" width="圖像的寬度". 必須. height="圖像的高度". 必須. xlink:href="圖像的路徑". 必須. + 顯現屬性: Color, Graphics, Images, Viewports |
| <line> | 定義一條線 | x1="直線起始點x座標" y1="直線起始點y座標" x2="直線終點x座標" y2="直線終點y座標" + 顯現屬性: Color, FillStroke, Graphics, Markers |
| <linearGradient> | 定義線性漸變。經過使用矢量線性漸變填充對象，並能夠定義爲水平，垂直或角漸變。 | id="id 屬性可爲漸變定義一個惟一的名稱。引用必須" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用視圖框或對象，以肯定相對位置矢量點。 （默認爲'objectBoundingBox）" gradientTransform="適用於漸變的轉變" x1="漸變向量x啓動點（默認0％）" y1="漸變向量y啓動點（默認0％）" x2="漸變向量x的終點。 （默認100％）" y2="漸變向量y的終點。 （默認0％）" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
| <marker> | 標記能夠放在直線，折線，多邊形和路徑的頂點。這些元素可使用maeker屬性的"maeker-start"，"maeker-mid"和"maeker-end"，繼承默認狀況下或可設置爲"none"或定義的標記的URI。您必須先定義標記，而後才能夠經過其URI引用。任何一種形狀，能夠把標記放在裏面。他們繪製元素時把它們附加到頂部 | markerUnits="strokeWidth'或'userSpaceOnUse"。若是是strokeWidth"那麼使用一個單位等於一個筆劃寬度。不然，標記尺度不會使用同一視圖單位做爲引用元素（默認爲'strokeWidth'）" refx="標記頂點鏈接的位置（默認爲0）" refy="標記頂點鏈接的位置（默認爲0）" orient="'auto'始終顯示標記的角度。 "auto"將計算某個角度使得X軸一個頂點的正切值（默認爲0） markerWidth="標記的寬度（默認3）" markerHeight="標記的高度（默認3）" viewBox="各點"看到"這個SVG繪圖區域。由空格或逗號分隔的4個值。(min x, min y, width, height)" + presentation attributes: All |
| <mask> | 度屏蔽是一種不透明度值的組合和裁剪。像裁剪，您可使用圖形，文字或路徑定義掩碼的部分。一個掩碼的默認狀態是徹底透明的，也就是裁剪平面的對面的。在掩碼的圖形設置掩碼的不透明部分 | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.設定裁剪面是不是相對完整的視窗或對象（默認：'objectBoundingBox'）" maskContentUnits="第二個掩碼相對對象的圖形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默認：'userSpaceOnUse'）" x="裁剪面掩碼（默認值：-10％）" y="裁剪面掩碼（默認值：-10％）" width="裁剪面掩碼（默認是：120％）" height="裁剪面掩碼（默認是：120％）" |
| metadata | 指定元數據 | |
| missing-glyph | ||
| mpath | ||
| <path> | 定義一個路徑 | d="定義路徑指令" pathLength="若是存在，路徑將進行縮放，以便計算各點至關於此值的路徑長度" transform="轉換列表" + 顯現屬性: Color, FillStroke, Graphics, Markers |
| <pattern> | 定義座標，你想要的視圖顯示和視圖的大小。而後添加到您的模式形狀。該模式命中時重複視圖框的邊緣（可視範圍） | id="用於引用這個模式的惟一ID。"必需的。 patternUnits="userSpaceOnUse'或'objectBoundingBox"。第二個值X，Y，width，height 一個會使用模式對象的邊框的小部分，單位（％）。" patternContentUnits="'userSpaceOnUse'或 'objectBoundingBox'" patternTransform="容許整個表達式進行轉換" x="模式的偏移量，來自左上角（默認爲0）" y="模式的偏移量，來自左上角（默認爲0）" width="模式平鋪的寬度（默認爲100％）" height="模式平鋪的高度（默認爲100％）" viewBox="各點"看到"這個SVG繪圖區域。由空格或逗號分隔的4個值。(min x, min y, width, height)" xlink:href="另外一種模式，其屬性值是默認值以及任何子類能夠繼承。遞歸" |
| <polygon> | 定義一個包含至少三邊圖形 | points="多邊形的點。點的總數必須是偶數"。必需的。 fill-rule="FillStroke演示屬性的部分" + 顯現屬性: Color, FillStroke, Graphics, Markers |
| <polyline> | 定義只有直線組成的任意形狀 | points=折線上的"點"。必需的。 + 顯現屬性: Color, FillStroke, Graphics, Markers |
| <radialGradient> | 定義放射性漸變。放射性漸變建立一個圓圈 | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用視圖框或對象以肯定相對位置的矢量點。 （默認爲'objectBoundingBox）" gradientTransform="適用於漸變的變換" cx="漸變的中心點（數字或％ - 50％是默認）" cy="漸變的中心點。 （默認50％）" r="漸變的半徑。 （默認50％）" fx="漸變的焦點。 （默認0％）" fy="漸變的焦點。 （默認0％）" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="引用到另外一個漸變，其屬性值做爲默認值。遞歸" |
| <rect> | 定義一個矩形 | x="矩形的左上角的x軸" y="矩形的左上角的y軸" rx="x軸的半徑（round元素）" ry="y軸的半徑（round元素）" width="矩形的寬度"。必需的。 height="矩形的高度"。必需的。 + 顯現屬性: Color, FillStroke, Graphics |
| script | 腳本容器。（例如ECMAScript） | |
| set | 設置一個屬性值指定時間 | |
| <stop> | 漸變中止 | offset="偏移中止（0到1/0％到100％）". 參考 stop-color="這個stop的顏色" stop-opacity="這個Stop的不透明度 (0到1)" |
| style | 可以使樣式表直接嵌入SVG內容內部 | |
| <svg> | 建立一個SVG文檔片斷 | x="左上角嵌入（默認爲0）" y="左上角嵌入（默認爲0）" width="SVG片斷的寬度（默認爲100％）" height="SVG片斷的高度（默認爲100％）" viewBox="點"seen"這個SVG繪圖區域。由空格或逗號分隔的4個值。 (min x, min y, width, height)" preserveAspectRatio="'none'或任何'xVALYVAL'的9種組合,VAL是"min"，"mid"或"max"。（默認狀況下none）" zoomAndPan="'magnify' or 'disable'.Magnify選項容許用戶平移和縮放您的文件（默認Magnify ）" xml="最外層<svg>元素都須要安裝SVG和它的命名空間： xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + 顯現屬性: All |
| switch | ||
| symbol | ||
| <text> | 定義一個文本 | x="列表的X -軸的位置。在文本中在第n個字符的位置在第n個x軸。若是後面存在額外的字符，耗盡他們最後一個字符以後放置的位置。 0是默認" y="列表的Y軸位置。（參考x）0是默認" dx="在字符的長度列表中移動相對最後繪製標誌符號的絕對位置。（參考x）" dy="在字符的長度列表中移動相對最後繪製標誌符號的絕對位置。（參考x）" rotate="一個旋轉的列表。第n個旋轉是第n個字符。附加字符沒有給出最後的旋轉值" textLength="SVG查看器將嘗試顯示文本之間的間距/或字形調整的文本目標長度。（默認：正常文本的長度）" lengthAdjust="告訴查看器，若是指定長度就嘗試進行調整用以呈現文本。這兩個值是'spacing'和'spacingAndGlyphs'" + 顯現屬性: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | 對 SVG 中的元素的純文本描述 - 並不做爲圖形的一部分來顯示。用戶代理會將其顯示爲工具提示 | |
| <tref> | 引用任何SVG文檔中的<text>元素和重用 | 相同的<TEXT>元素 |
| <tspan> | 元素等同於<text>，但能夠在內部嵌套文本標記以及內部自己 | Identical to the <text> element + in addition: xlink:href="引用一個<TEXT>元素" |
| <use> | 使用URI引用一個<G>,<svg>或其餘具備一個惟一的ID屬性和重複的圖形元素。複製的是原始的元素，所以文件中的原始存在只是一個參考。原始影響到全部副本的任何改變。 | x="克隆元素的左上角的x軸" y="克隆元素的左上角的y軸" width="克隆元素的寬度" height="克隆元素的高度" xlink:href="URI引用克隆元素" + 顯現屬性: All |
| view | ||
| vkern |
相關文章
- 1. 參考手冊
- 2. Networkx參考手冊
- 3. DHTML參考手冊
- 4. php參考手冊
- 5. python參考手冊
- 6. thymeleaf參考手冊
- 7. JS參考手冊
- 8. CSS 參考手冊
- 9. css參考手冊
- 10. HTML 參考手冊
- 更多相關文章...
- • SVG 參考手冊 - SVG 教程
- • XQuery 參考手冊 - XQuery 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 參考手冊
- 2. Networkx參考手冊
- 3. DHTML參考手冊
- 4. php參考手冊
- 5. python參考手冊
- 6. thymeleaf參考手冊
- 7. JS參考手冊
- 8. CSS 參考手冊
- 9. css參考手冊
- 10. HTML 參考手冊