SVG 參考手冊(cè)
2020-08-28 10:43 更新
SVG 參考手冊(cè)
該 SVG 參考手冊(cè)提供了一個(gè)完整的 SVG 元素列表，可以作為學(xué)習(xí) SVG 的速查參考。
SVG 元素
| 元素 | 說明 | 屬性 |
|---|---|---|
| <a> | 創(chuàng)建一個(gè)SVG元素周圍鏈接 | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | 允許對(duì)象性文字進(jìn)行控制，來呈現(xiàn)特殊的字符數(shù)據(jù) | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | 定義一系列象性符號(hào)的替換 | id |
| <altGlyphItem> | 定義一系列候選的象性符號(hào)的替換 | id |
| <animate> | 隨時(shí)間動(dòng)態(tài)改變屬性 | attributeName="目標(biāo)屬性名稱" from="起始值" to="結(jié)束值" dur="持續(xù)時(shí)間" repeatCount="動(dòng)畫時(shí)間將發(fā)生" |
| <animateColor> | 定義隨著時(shí)間的推移顏色轉(zhuǎn)換 | by="相對(duì)偏移值" from="起始值" to="結(jié)束值" |
| <animateMotion> | 使元素沿著動(dòng)作路徑移動(dòng) | calcMode="動(dòng)畫的插補(bǔ)模式。可以是'discrete', 'linear', 'paced', 'spline'" path="運(yùn)動(dòng)路徑" keyPoints="沿運(yùn)動(dòng)路徑的對(duì)象目前時(shí)間應(yīng)移動(dòng)多遠(yuǎn)" rotate="應(yīng)用旋轉(zhuǎn)變換" xlink:href="一個(gè)URI引用<path>元素，它定義運(yùn)動(dòng)路徑" |
| <animateTransform> | 動(dòng)畫上一個(gè)目標(biāo)元素變換屬性，從而使動(dòng)畫控制平移，縮放，旋轉(zhuǎn)或傾斜 | by="相對(duì)偏移值" from="起始值" to="結(jié)束值" type="類型的轉(zhuǎn)換其值是隨時(shí)間變化?？梢允?'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | 定義一個(gè)圓 | cx="圓的x軸坐標(biāo)" cy="圓的y軸坐標(biāo)" r="圓的半徑". 必需. + 顯現(xiàn)屬性：顏色，F(xiàn)illStroke，圖形 |
| <clipPath> | 用于隱藏位于剪切路徑以外的對(duì)象部分。定義繪制什么和什么不繪制的模具被稱為剪切路徑 | clip-path="引用剪貼路徑和引用剪貼路徑交叉" clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二個(gè)值childern一個(gè)對(duì)象的邊框，會(huì)使用掩碼的一小部分單位（默認(rèn)："userSpaceOnUse"）" |
| <color-profile> | 指定顏色配置文件的說明（使用CSS樣式文件時(shí)） | local="本地存儲(chǔ)顏色配置文件唯一ID" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="ICC配置文件資源URI" |
| <cursor> | 定義一個(gè)獨(dú)立于平臺(tái)的自定義光標(biāo) | x="x軸左上角光標(biāo)（默認(rèn)為0）" y="y軸的左上角光標(biāo)（默認(rèn)為0）" xlink:href="使用光標(biāo)圖像URI |
| <defs> | 引用的元素容器 | |
| <desc> | 對(duì) SVG 中的元素的純文本描述 - 并不作為圖形的一部分來顯示。用戶代理會(huì)將其顯示為工具提示 | |
| <ellipse> | 定義一個(gè)橢圓 | cx="橢圓x軸坐標(biāo)" cy="橢圓y軸坐標(biāo)" rx="沿x軸橢圓形的半徑"。必需。 ry="沿y軸長(zhǎng)橢圓形的半徑"。必需。 + 顯現(xiàn)屬性：顏色，F(xiàn)illStroke，圖形 |
| <feBlend> | 使用不同的混合模式把兩個(gè)對(duì)象合成在一起 | mode="圖像混合模式：normal|multiply|screen|darken|lighten" in="標(biāo)識(shí)為給定的濾鏡原始輸入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="第二輸入圖像的混合操作" |
| feColorMatrix | SVG濾鏡。適用矩陣轉(zhuǎn)換 | |
| feComponentTransfer | SVG 濾鏡。執(zhí)行數(shù)據(jù)的 component-wise 重映射 | |
| feComposite | SVG 濾鏡 | |
| feConvolveMatrix | SVG 濾鏡 | |
| feDiffuseLighting | SVG 濾鏡 | |
| feDisplacementMap | SVG 濾鏡 | |
| feDistantLight | SVG濾鏡。定義一個(gè)光源 | |
| feFlood | SVG濾鏡 | |
| feFuncA | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feFuncB | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feFuncG | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feFuncR | SVG 濾鏡。feComponentTransfer 的子元素 | |
| feGaussianBlur | SVG濾鏡。執(zhí)行高斯模糊圖像 | |
| feImage | SVG濾鏡。 | |
| feMerge | SVG濾鏡。建立在彼此頂部圖像層 | |
| feMergeNode | SVG 濾鏡。feMerge的子元素 | |
| feMorphology | SVG 濾鏡。 對(duì)源圖形執(zhí)行"fattening" 或者 "thinning" | |
| feOffset | SVG濾鏡。相對(duì)其當(dāng)前位置移動(dòng)圖像 | |
| fePointLight | SVG濾鏡 | |
| feSpecularLighting | SVG濾鏡 | |
| feSpotLight | SVG濾鏡 | |
| feTile | SVG濾鏡 | |
| feTurbulence | SVG濾鏡 | |
| filter | 濾鏡效果的容器 | |
| font | 定義字體 | |
| font-face | 描述一種字體的特點(diǎn) | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | 用于把相關(guān)元素進(jìn)行組合的容器元素 | id="該組的名稱" fill="該組填充顏色" opacity="該組不透明度" + 顯現(xiàn)屬性: All |
| glyph | 為給定的象形符號(hào)定義圖形 | |
| glyphRef | 定義要使用的可能的象形符號(hào) | |
| hkern | ||
| <image> | 定義圖像 | x="圖像的左上角的x軸坐標(biāo)" y="圖像的左上角的y軸坐標(biāo)" width="圖像的寬度". 必須. height="圖像的高度". 必須. xlink:href="圖像的路徑". 必須. + 顯現(xiàn)屬性: Color, Graphics, Images, Viewports |
| <line> | 定義一條線 | x1="直線起始點(diǎn)x坐標(biāo)" y1="直線起始點(diǎn)y坐標(biāo)" x2="直線終點(diǎn)x坐標(biāo)" y2="直線終點(diǎn)y坐標(biāo)" + 顯現(xiàn)屬性: Color, FillStroke, Graphics, Markers |
| <linearGradient> | 定義線性漸變。通過使用矢量線性漸變填充對(duì)象，并可以定義為水平，垂直或角漸變。 | id="id 屬性可為漸變定義一個(gè)唯一的名稱。引用必須" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用視圖框或?qū)ο螅源_定相對(duì)位置矢量點(diǎn)。 （默認(rèn)為'objectBoundingBox）" gradientTransform="適用于漸變的轉(zhuǎn)變" x1="漸變向量x啟動(dòng)點(diǎn)（默認(rèn)0％）" y1="漸變向量y啟動(dòng)點(diǎn)（默認(rèn)0％）" x2="漸變向量x的終點(diǎn)。 （默認(rèn)100％）" y2="漸變向量y的終點(diǎn)。 （默認(rèn)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> | 標(biāo)記可以放在直線，折線，多邊形和路徑的頂點(diǎn)。這些元素可以使用marker屬性的"marker-start"，"marker-mid"和"marker-end"，繼承默認(rèn)情況下或可設(shè)置為"none"或定義的標(biāo)記的URI。您必須先定義標(biāo)記，然后才可以通過其URI引用。任何一種形狀，可以把標(biāo)記放在里面。他們繪制元素時(shí)把它們附加到頂部 | markerUnits="strokeWidth'或'userSpaceOnUse"。如果是strokeWidth"那么使用一個(gè)單位等于一個(gè)筆劃寬度。否則，標(biāo)記尺度不會(huì)使用同一視圖單位作為引用元素（默認(rèn)為'strokeWidth'）" refx="標(biāo)記頂點(diǎn)連接的位置（默認(rèn)為0）" refy="標(biāo)記頂點(diǎn)連接的位置（默認(rèn)為0）" orient="'auto'始終顯示標(biāo)記的角度。 "auto"將計(jì)算某個(gè)角度使得X軸一個(gè)頂點(diǎn)的正切值（默認(rèn)為0） markerWidth="標(biāo)記的寬度（默認(rèn)3）" markerHeight="標(biāo)記的高度（默認(rèn)3）" viewBox="各點(diǎn)"看到"這個(gè)SVG繪圖區(qū)域。由空格或逗號(hào)分隔的4個(gè)值。(min x, min y, width, height)" + presentation attributes: All |
| <mask> | 度屏蔽是一種不透明度值的組合和裁剪。像裁剪，您可以使用圖形，文字或路徑定義掩碼的部分。一個(gè)掩碼的默認(rèn)狀態(tài)是完全透明的，也就是裁剪平面的對(duì)面的。在掩碼的圖形設(shè)置掩碼的不透明部分 | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.設(shè)定裁剪面是否是相對(duì)完整的視窗或?qū)ο螅J(rèn)：'objectBoundingBox'）" maskContentUnits="第二個(gè)掩碼相對(duì)對(duì)象的圖形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默認(rèn)：'userSpaceOnUse'）" x="裁剪面掩碼（默認(rèn)值：-10％）" y="裁剪面掩碼（默認(rèn)值：-10％）" width="裁剪面掩碼（默認(rèn)是：120％）" height="裁剪面掩碼（默認(rèn)是：120％）" |
| metadata | 指定元數(shù)據(jù) | |
| missing-glyph | ||
| mpath | ||
| <path> | 定義一個(gè)路徑 | d="定義路徑指令" pathLength="如果存在，路徑將進(jìn)行縮放，以便計(jì)算各點(diǎn)相當(dāng)于此值的路徑長(zhǎng)度" transform="轉(zhuǎn)換列表" + 顯現(xiàn)屬性: Color, FillStroke, Graphics, Markers |
| <pattern> | 定義坐標(biāo)，你想要的視圖顯示和視圖的大小。然后添加到您的模式形狀。該模式命中時(shí)重復(fù)視圖框的邊緣（可視范圍） | id="用于引用這個(gè)模式的唯一ID。"必需的。 patternUnits="userSpaceOnUse'或'objectBoundingBox"。第二個(gè)值X，Y，width，height 一個(gè)會(huì)使用模式對(duì)象的邊框的小部分，單位（％）。" patternContentUnits="'userSpaceOnUse'或 'objectBoundingBox'" patternTransform="允許整個(gè)表達(dá)式進(jìn)行轉(zhuǎn)換" x="模式的偏移量，來自左上角（默認(rèn)為0）" y="模式的偏移量，來自左上角（默認(rèn)為0）" width="模式平鋪的寬度（默認(rèn)為100％）" height="模式平鋪的高度（默認(rèn)為100％）" viewBox="各點(diǎn)"看到"這個(gè)SVG繪圖區(qū)域。由空格或逗號(hào)分隔的4個(gè)值。(min x, min y, width, height)" xlink:href="另一種模式，其屬性值是默認(rèn)值以及任何子類可以繼承。遞歸" |
| <polygon> | 定義一個(gè)包含至少三邊圖形 | points="多邊形的點(diǎn)。點(diǎn)的總數(shù)必須是偶數(shù)"。必需的。 fill-rule="FillStroke演示屬性的部分" + 顯現(xiàn)屬性: Color, FillStroke, Graphics, Markers |
| <polyline> | 定義只有直線組成的任意形狀 | points=折線上的"點(diǎn)"。必需的。 + 顯現(xiàn)屬性: Color, FillStroke, Graphics, Markers |
| <radialGradient> | 定義放射性漸變。放射性漸變創(chuàng)建一個(gè)圓圈 | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用視圖框或?qū)ο笠源_定相對(duì)位置的矢量點(diǎn)。 （默認(rèn)為'objectBoundingBox）" gradientTransform="適用于漸變的變換" cx="漸變的中心點(diǎn)（數(shù)字或％ - 50％是默認(rèn)）" cy="漸變的中心點(diǎn)。 （默認(rèn)50％）" r="漸變的半徑。 （默認(rèn)50％）" fx="漸變的焦點(diǎn)。 （默認(rèn)0％）" fy="漸變的焦點(diǎn)。 （默認(rèn)0％）" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="引用到另一個(gè)漸變，其屬性值作為默認(rèn)值。遞歸" |
| <rect> | 定義一個(gè)矩形 | x="矩形的左上角的x軸" y="矩形的左上角的y軸" rx="x軸的半徑（round元素）" ry="y軸的半徑（round元素）" width="矩形的寬度"。必需的。 height="矩形的高度"。必需的。 + 顯現(xiàn)屬性: Color, FillStroke, Graphics |
| script | 腳本容器。（例如ECMAScript） | |
| set | 設(shè)置一個(gè)屬性值指定時(shí)間 | |
| <stop> | 漸變停止 | offset="偏移停止（0到1/0％到100％）". 參考 stop-color="這個(gè)stop的顏色" stop-opacity="這個(gè)Stop的不透明度 (0到1)" |
| style | 可使樣式表直接嵌入SVG內(nèi)容內(nèi)部 | |
| <svg> | 創(chuàng)建一個(gè)SVG文檔片段 | x="左上角嵌入（默認(rèn)為0）" y="左上角嵌入（默認(rèn)為0）" width="SVG片段的寬度（默認(rèn)為100％）" height="SVG片段的高度（默認(rèn)為100％）" viewBox="點(diǎn)"seen"這個(gè)SVG繪圖區(qū)域。由空格或逗號(hào)分隔的4個(gè)值。 (min x, min y, width, height)" preserveAspectRatio="'none'或任何'xVALYVAL'的9種組合,VAL是"min"，"mid"或"max"。（默認(rèn)情況下none）" zoomAndPan="'magnify' or 'disable'.Magnify選項(xiàng)允許用戶平移和縮放您的文件（默認(rèn)Magnify ）" xml="最外層<svg>元素都需要安裝SVG和它的命名空間： xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + 顯現(xiàn)屬性: All |
| switch | ||
| symbol | ||
| <text> | 定義一個(gè)文本 | x="列表的X -軸的位置。在文本中在第n個(gè)字符的位置在第n個(gè)x軸。如果后面存在額外的字符，耗盡他們最后一個(gè)字符之后放置的位置。 0是默認(rèn)" y="列表的Y軸位置。（參考x）0是默認(rèn)" dx="在字符的長(zhǎng)度列表中移動(dòng)相對(duì)最后繪制標(biāo)志符號(hào)的絕對(duì)位置。（參考x）" dy="在字符的長(zhǎng)度列表中移動(dòng)相對(duì)最后繪制標(biāo)志符號(hào)的絕對(duì)位置。（參考x）" rotate="一個(gè)旋轉(zhuǎn)的列表。第n個(gè)旋轉(zhuǎn)是第n個(gè)字符。附加字符沒有給出最后的旋轉(zhuǎn)值" textLength="SVG查看器將嘗試顯示文本之間的間距/或字形調(diào)整的文本目標(biāo)長(zhǎng)度。（默認(rèn)：正常文本的長(zhǎng)度）" lengthAdjust="告訴查看器，如果指定長(zhǎng)度就嘗試進(jìn)行調(diào)整用以呈現(xiàn)文本。這兩個(gè)值是'spacing'和'spacingAndGlyphs'" + 顯現(xiàn)屬性: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | 對(duì) SVG 中的元素的純文本描述 - 并不作為圖形的一部分來顯示。用戶代理會(huì)將其顯示為工具提示 | |
| <tref> | 引用任何SVG文檔中的<text>元素和重用 | 相同的<TEXT>元素 |
| <tspan> | 元素等同于<text>，但可以在內(nèi)部嵌套文本標(biāo)記以及內(nèi)部本身 | Identical to the <text> element + in addition: xlink:href="引用一個(gè)<TEXT>元素" |
| <use> | 使用URI引用一個(gè)<G>,<svg>或其他具有一個(gè)唯一的ID屬性和重復(fù)的圖形元素。復(fù)制的是原始的元素，因此文件中的原始存在只是一個(gè)參考。原始影響到所有副本的任何改變。 | x="克隆元素的左上角的x軸" y="克隆元素的左上角的y軸" width="克隆元素的寬度" height="克隆元素的高度" xlink:href="URI引用克隆元素" + 顯現(xiàn)屬性: All |
| view | ||
| vkern |
以上內(nèi)容是否對(duì)您有幫助：
更多建議：