SVG Reference

SVG Reference (SVG参考)

SVG drawings and images are created with different elements. Here, you can find a table of SVG elements with corresponding descriptions and attributes. (SVG绘图和图像是用不同的元素创建的。在这里,您可以找到具有相应描述和属性的SVG元素表。)

SVG elements

SVG elements (SVG元素)

ElementDescriptionAttributes
<a>Creates a link to other web pages, files, email addresses, locations on the same page, or any other URL.xlink:show xlink:actuate xlink:href target
<altGlyph>Controls the glyphs used to render specific character data.x y dx dy rotate glyphRef format xlink:href
<altGlyphDef>Specifies a substitution set for glyphs.id
<altGlyphItem>Specifies a candidate set of glyph substitutions.id
<animate>Specifies how an element’s attribute changes over time.attributeName=“the name of the target attribute” by=“a relative offset value” from=“the starting value” to=“the ending value” dur=“the duration” repeatCount=“the number of time the animation will take place”
<animateMotion>Makes a referenced element to move along a motion path.calcMode=“interpolation mode for the animation. Can be ‘discrete’, ’linear’, ‘paced’, ‘spline’” path=“motion path” keyPoints=“how far the object will move along the motion path for each keyTimes values” rotate=“rotation transformation” xlink:href=“URI reference to the <path> element specifying the motion path”
<animateTransform>Animates a transformation attribute on the target element, allowing animations to control translation, rotation, scaling, and/or skewing.by=“relative offset value” from=“starting value” to=“ending value” type=“transformation type which is to have its values change in time. Can be ’translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY’”
<circle>Specifies a circle.cx=“x-axis center of the circle” cy=“y-axis center of the circle” r=“radius of the circle”. Required. presentation attributes: Color, FillStroke, Graphics
<clipPath>Specifies a clipping path.clip-path clipPathUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’. default: ‘userSpaceOnUse’
<color-profile>Specifies a description of the color profile used for the image.local=“unique ID for a color profile stored locally” name="" rendering-intent=“auto
<cursor>Specifies a platform-independent custom cursor.x=“x-axis top-left corner of the cursor (default is 0)” y=“y-axis top-left corner of the cursor (default is 0)” xlink:href=“URI of the image to use as the cursor”
<defs>Stores graphical objects that will be used later.
<desc>Provides a text-only description for any SVG graphics element or container element.
<ellipse>Specifies an ellipse.cx=“x-axis center of the ellipse” cy=“y-axis center of the ellipse” rx=“length of the ellipse’s radius along the x-axis”. Required. ry=“length of the ellipse’s radius along the y-axis”. Required. presentation attributes: Color, FillStroke, Graphics
<feColorMatrix>SVG filter.
<feComposite>SVG filter.
<feConvolveMatrix>SVG filter.
<feDiffuseLighting>SVG filter.
<feDisplacementMap>SVG filter.
<feDistantLight>SVG filter.
<feFlood>SVG filter.
<feFuncA>SVG filter. Sub-element to feComponentTransfer.
<feFuncB>SVG filter. Sub-element to feComponentTransfer.
<feFuncG>SVG filter. Sub-element to feComponentTransfer.
<feFuncR>SVG filter. Sub-element to feComponentTransfer.
<feGaussianBlur>SVG filter. Creates a Gaussian blur on the image.
<feImage>SVG filter.
<feMerge>SVG filter. Creates image layers.
<feMergeNode>SVG filter. Sub-element to feMerge.
<feMorphology>SVG filter. Performs a “thinning” or “fattening”.
<feOffset>SVG filter. Offsets the input image.
<fePointLight>SVG filter.
<feSpecularLighting>SVG filter.
<feSpotLight>SVG filter.
<feTile>SVG filter.
<feTurbulence>SVG filter.
<filter>Specifies a custom filter effect.
<font>Specifies a font.
<font-face>Describes a font’s characteristics.
<font-face-format>Specifies the font type referenced by its parent <font-face-uri>.
<font-face-name>References a local font by name.
<font-face-src>Corresponds to the src descriptor within CSS @font-face rules.
<font-face-uri>Spesifies a remote definition of the current font
<foreignObject>Allows user agents to offer graphical rendering features besides those defined within the specification.
<g>Groups elements together.id=“name of the group” fill=“fill color for the group” opacity=“opacity for the group” presentation attributes: All
<glyph>Specifies the graphics for a particular glyph.
<glyphRef>Specifies a possible glyph to use.
<hkern>Specifies kerning pairs and adjustment values in the horizontal advance value.
<image>Specifies an image.x=“x-axis top-left corner of the image” y=“y-axis top-left corner of the image” width=“width of the image”. Required. height=” height of the image". Required. xlink:href=“path to the image”. Required. presentation attributes: Color, Graphics, Images, Viewports
<line>Specifies a line.x1=“x start point of the line” y1=“y start point of the line” x2=“x end point of the line” y2=“y end point of the line” presentation attributes: Color, FillStroke, Graphics, Markers
<linearGradient>Specifies a linear gradient that fills the object by using a vector.id=“a unique id used to reference this pattern. Required to reference it” gradientUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’. (Default ‘objectBoundingBox’)" gradientTransform=“the transformation to apply to the gradient” x1=“x start point of the gradient vector (number or % - 0% is default)” y1=“y start point of the gradient vector. (0% default)” x2=“x end point of the gradient vector. (100% default)” y2=“y end point of the gradient vector. (0% default)” spreadMethod="‘pad’ or ‘reflect’ or ‘repeat’" xlink:href=“reference to another gradient attribute values of which are used as defaults and stops included. Recursive”
<marker>Specifies the graphic that is to be used for drawing arrowheads. These elements can use the following marker attributes: “marker-start”, “marker-mid” and “marker-end”. Define the marker before referencing it via its URI.markerUnits="‘strokeWidth’ or ‘userSpaceOnUse’. If ‘strokeWidth’ is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default ‘strokeWidth’)" refx=“the position where the marker connects with the vertex (default 0)” refy=“the position where the marker connects with the vertex (default 0)” orient="‘auto’ or an angle to always display the marker at. ‘auto’ will compute an angle making the x-axis a tangent of the vertex (default 0)" markerWidth=“width of the marker (default 3)” markerHeight=“height of the marker (default 3)” viewBox=“SVG viewport’s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)” presentation attributes: All
<mask>Specifies an alpha mask, which is a combination of opacity values and clipping. Masking is a combination of opacity values and clipping. You can use text, shapes, or paths to define the mask sections. The default state of the mask is fully transparent. The graphics in a mask determine how opaque the mask portions are.maskUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: ‘objectBoundingBox’)" maskContentUnits=“Specifies the coordinate system for the content of <mask>. ‘userSpaceOnUse’ or ‘objectBoundingBox’ (default: ‘userSpaceOnUse’)” x=“clipping plane of the mask (default: -10%)” y=“clipping plane of the mask (default: -10%)” width=“clipping plane of the mask (default: 120%)” height=“clipping plane of the mask (default: 120%)”
<metadata>Specifies metadata.
<missing-glyph>
<mpath>References an external <path> element as a definition of a motion path.
<path>Specifies a path.d=“a set of commands specifying the path” pathLength=“the total length for the path” transform=“a list of transformations” presentation attributes: Color, FillStroke, Graphics, Markers
<pattern>Specifies a graphics object that can be redrawn at repeated coordinate intervals.id=“unique id used for referencing this pattern.” Required. patternUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern." patternContentUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’" patternTransform=“the whole pattern can be transformed” x=“pattern’s offset from the top-left corner (default 0)” y=“pattern’s offset from the top-left corner. (default 0)” width=“width of the pattern tile (default 100%)” height=“height of the pattern tile (default 100%)” viewBox=“the points “seen” in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)” xlink:href=“reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive”
<polygon>Specifies a graphic containing at least three sides.points=“the points of the polygon. The total number of points sould be even”. Required. fill-rule=“part of the FillStroke presentation attributes”
presentation attributes: Color, FillStroke, Graphics, Markers
<polyline>Specifies any shape consisting of only straight lines.points=“the points on the polyline”. Required. presentation attributes: Color, FillStroke, Graphics, Markers
<radialGradient>Specifies a radial gradient.gradientUnits="‘userSpaceOnUse’ or ‘objectBoundingBox’. (Default ‘objectBoundingBox’)" gradientTransform=“transformation to apply to the gradient” cx=“center point of the gradient (number or % - 50% is default)” cy=“center point of the gradient. (50% default)” r=“radius of the gradient. (50% default)” fx=“focus point of the gradient. (0% default)” fy=“focus point of the gradient. (0% default)” spreadMethod="‘pad’ or ‘reflect’ or ‘repeat’" xlink:href=“Reference to another gradient attribute values of which are used as defaults and stops included. Recursive”
<rect>Specifies a rectangle.x=“x-axis top-left corner of the rectangle” y=“y-axis top-left corner of the rectangle” rx=“x-axis radius (to round the element)” ry=“y-axis radius (to round the element)” width=“width of the rectangle”. Required. height=“height of the rectangle” Required. presentation attributes: Color, FillStroke, Graphics
<script>Adds scripts to an SVG document.
<set>Sets an attribute’s value for a specified duration.
<stop>Specifies a color and its position to use on a gradient.offset=“offset for this stop (0 to 1/0% to 100%)”. Required. stop-color=“color of this stop” stop-opacity=“opacity of this stop (0 to 1)”
<style>Allows style sheets to be embedded inside an SVG content.
<svg>Creates a fragment of an SVG document.x=“top left corner when embedded (default 0)” y=“top left corner when embedded (default 0)” width=“width of the svg fragment (default 100%)” height=“height of the svg fragment (default 100%)” viewBox=“the points “seen” in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)” preserveAspectRatio="’none’ or any of the 9 combinations of ‘xVALYVAL’ where VAL is ‘min’, ‘mid’ or ‘max’. (default xMidYMid)" zoomAndPan="‘magnify’ or ‘disable’. (default magnify)" xml=“outermost element needs to setup SVG and its namespace: xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink” xml:space=“preserve”” presentation attributes: All
<switch>Allows displaying different shapes depending on the use of the language by the SVG viewer.
<symbol>Specifies the reusable symbols.
<text>Specifies a text.x=“a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default” y=“a list of y-axis positions. (see x). 0 is default” dx=“a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)” dy=“a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)” rotate=“a list of rotations. The nth rotation is performed on the nth character.” textLength=“a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and/or the glyphs. (default: The text’s normal length)” lengthAdjust=“tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are ‘spacing’ and ‘spacingAndGlyphs’”< presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements
<textPath>
<title>Description for elements of SVG container element or graphics element.
<tref>References a <text> element in the SVG document.Identical to the <text> element
<tspan>Specifies a subtext within another <tspan> element or a <text> element.Identical to the <text> element and in addition: xlink:href=“Reference to a <text> element”
<use>Uses a URI to reference a <svg>, <g>, or other graphical element with a unique id attribute and duplicate it.x=“x-axis top-left corner of the cloned element” y=“y-axis top-left corner of the cloned element” width=“width of the cloned element” height=“height of the cloned element” xlink:href=“URI reference to the cloned element” presentation attributes: All
<view>This is a way to view the image
<vkern>Specifies kerning pairs for vertically-oriented pairs of glyphs.


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部