Ultimele tutoriale de dezvoltare web
 

SVG Referinţă


SVG Elemente

Element Descriere atribute
<a> Creează o legătură în jurul valorii de elemente de SVG xlink:show
xlink:actuate
xlink:href
target
<altGlyph> Asigură controlul asupra glifele utilizate pentru a face special date caracter x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> Definește un set de substituție pentru glifele id
<altGlyphItem> Definește un set de candidat substituții glyph id
<animate> Definește modul în care un atribut al unui element se schimbă în timp 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> Cauze un element de referință pentru a trece de-a lungul unei căi de mișcare calcMode="the interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'"
path="the motion path"
keyPoints="how far along the motion path the object shall move at the moment in time"
rotate="applies a rotation transformation"
xlink:href="an URI reference to the <path> element which defines the motion path"
<animateTransform> Animă un atribut de transformare pe un element țintă, permițând astfel animații pentru a controla traducerea, scalare, rotire și / sau distorsiona by="a relative offset value"
from="the starting value"
to="the ending value"
type="the type of transformation which is to have its values change over time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle> Definește un cerc cx="the x-axis center of the circle"
cy="the y-axis center of the circle"
r="The circle's radius". Required.

+ presentation attributes:
Color, FillStroke, Graphics
<clipPath> Clipping este despre ceea ce se ascunde în mod normal, ar fi trase. Șablonul care definește ceea ce este și ce nu este tras este numit un traseu de tăiere clip-path="the referenced clipping path is intersected with the referencing clipping path"
clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of children a fraction of the object bounding box which uses the mask (default: 'userSpaceOnUse') "
<color-profile> Specifică o descriere profil de culoare (atunci când documentul este în stil folosind CSS) local="the unique ID for a locally stored color profile"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="the URI of an ICC profile resource"
<cursor> Definește un cursor personalizat independent de platforma x="the x-axis top-left corner of the cursor (default is 0) "
y="the y-axis top-left corner of the cursor (default is 0) "
xlink:href="the URI of the image to use as the cursor
<defs> Un container pentru elementele de referință  
<desc> O descriere text numai pentru elemente de container sau elemente grafice în SVG (agentii utilizator pot afișa textul ca tooltip)  
<ellipse> Definește o elipsă cx="the x-axis center of the ellipse"
cy="the y-axis center of the ellipse"
rx="the length of the ellipse's radius along the x-axis". Required.
ry="the length of the ellipse's radius along the y-axis". Required.

+ presentation attributes:
Color, FillStroke, Graphics
<feBlend> Compune două obiecte împreună în conformitate cu un anumit mod de amestecare mode="the image blending modes: normal|multiply|screen|darken|lighten"
in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="the second input image to the blending operation"
feColorMatrix filtru SVG. Se aplică o transformare matrice  
feComponentTransfer filtru SVG. Efectuează remapare-componenta inteleapta a datelor  
feComposite filtru SVG.  
feConvolveMatrix filtru SVG.  
feDiffuseLighting filtru SVG.  
feDisplacementMap filtru SVG.  
feDistantLight filtru SVG. Definește o sursă de lumină  
feFlood filtru SVG.  
feFuncA filtru SVG. Sub-element feComponentTransfer  
feFuncB filtru SVG. Sub-element feComponentTransfer  
feFuncG filtru SVG. Sub-element feComponentTransfer  
feFuncR filtru SVG. Sub-element feComponentTransfer  
feGaussianBlur filtru SVG. Efectuează o neclaritate gaussiană pe imaginea  
feImage filtru SVG.  
feMerge filtru SVG. Creează straturi de imagini pe partea de sus a reciproc  
feMergeNode filtru SVG. Sub-element feMerge  
feMorphology filtru SVG. Efectuează o "fattening" sau "thinning" pe un grafic sursă  
feOffset filtru SVG. Mută ​​o imagine în raport cu poziția sa actuală  
fePointLight filtru SVG.  
feSpecularLighting filtru SVG.  
feSpotLight filtru SVG.  
feTile filtru SVG.  
feTurbulence filtru SVG.  
filter Recipient pentru efectele de filtrare  
font Definește un font  
font-face Descrie caracteristicile unui font  
font-face-format 
font-face-name 
font-face-src 
font-face-uri 
foreignObject 
<g> Folosit la elemente împreună grup id="the name of the group"
fill="the fill color for the group"
opacity="the opacity for the group"

+ presentation attributes:
All
glyph Definește grafica pentru un anumit glif  
glyphRef Definește un posibil glif de a utiliza  
hkern 
<image> Definește o imagine x="the x-axis top-left corner of the image"
y="the y-axis top-left corner of the image"
width="the width of the image". Required.
height="the height of the image". Required.
xlink:href="the path to the image". Required.

+ presentation attributes:
Color, Graphics, Images, Viewports
<line> Definește o linie x1="the x start point of the line"
y1="the y start point of the line"
x2="the x end point of the line"
y2="the y end point of the line"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<linearGradient> Definește un gradient liniar. gradienții liniari umple obiectul prin utilizarea unui vector și poate fi definită ca gradienti orizontale, verticale sau unghiulare. id="the unique id used to reference this pattern. Required to reference it"
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') "
gradientTransform="the transformation to apply to the gradient"
x1="the x start point of the gradient vector (number or % - 0% is default) "
y1="the y start point of the gradient vector. (0% default) "
x2="the x end point of the gradient vector. (100% default) "
y2="the y end point of the gradient vector. (0% default) "
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<marker> Markerii pot fi amplasate pe nodurile de linii, polilinii, poligoane și căi. Aceste elemente pot utiliza marker atributele "marker-start" de "marker-mid" "marker-start" , "marker-mid" de "marker-mid" și „marker de -end““ , care moștenesc în mod prestabilit sau poate fi setată la«nici unul»sau URI - ul unui marker definit. Trebuie să definiți mai întâi marcatorul înainte de a putea face referire la el prin intermediul URI său. Orice fel de formă poate fi pus în interiorul marcator. Acestea sunt desenate pe partea de sus a elementului la care sunt atașați markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used then one unit equals one stroke width. Otherwise, the marker does not scale and uses the 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 show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex (default 0) "
markerWidth="the width of the marker (default 3) "
markerHeight="the height of the marker (default 3) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "

+ presentation attributes:
All
<mask> Mascarea este o combinație de valori de opacitate și tăiere. Ca și tăiere, puteți utiliza forme, text sau căi pentru a defini secțiuni ale măștii. Starea implicită a unei măști este complet transparentă, care este opusul clipping plan. Grafica într-o mască stabilește modul în care porțiunile opace ale măștii sunt maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Set whether the clipping plane is relative the full view port or object (default: 'objectBoundingBox') "
maskContentUnits="Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse') "
x="the clipping plane of the mask (default: -10%) "
y="the clipping plane of the mask (default: -10%) "
width="the clipping plane of the mask (default: 120%) "
height="the clipping plane of the mask (default: 120%) "
metadata specifică metadate  
missing-glyph 
mpath 
<path> Definește o cale d="a set of commands which define the path"
pathLength="If present, the path will be scaled so that the computed path length of the points equals this value"
transform="a list of transformations"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<pattern> Definește coordonatele pe care doriți vizualizarea pentru a afișa și dimensiunea vizualizării. Apoi, adăugați forme în modelul dumneavoastră. Modelul se repetă atunci când o margine a caseta de vedere (viewing area) de (viewing area) este lovit id="the unique id used to reference this pattern." Required.
patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern."
patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'"
patternTransform="allows the whole pattern to 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="the width of the pattern tile (default 100%) "
height="the height of the pattern tile (default 100%) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "
xlink:href="reference to another pattern whose attribute values are used as defaults and any children are inherited. Recursive"
 
<polygon> Definește un grafic care conține cel puțin trei laturi points="the points of the polygon. The total number of points must be even". Required.
fill-rule="part of the FillStroke presentation attributes"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<polyline> Definește orice formă, care este format din doar linii drepte points="the points on the polyline". Required.

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<radialGradient> Definește un gradient radial. gradienți radiale sunt create prin luarea unui cerc și lin schimbarea valori între stațiile de gradient de la punctul de focalizare pe raza exterioară. gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') "
gradientTransform="the transformation to apply to the gradient"
cx="the center point of the gradient (number or % - 50% is default) "
cy="the center point of the gradient. (50% default) "
r="the radius of the gradient. (50% default) "
fx="the focus point of the gradient. (0% default) "
fy="The focus point of the gradient. (0% default) "
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="Reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<rect> Definește un dreptunghi x="the x-axis top-left corner of the rectangle"
y="the y-axis top-left corner of the rectangle"
rx="the x-axis radius (to round the element) "
ry="the y-axis radius (to round the element) "
width="the width of the rectangle". Required.
height="the height of the rectangle" Required.

+ presentation attributes:
Color, FillStroke, Graphics
script Container pentru script - uri (eg, ECMAScript) de (eg, ECMAScript)  
set Setează valoarea unui atribut pentru o durată specificată  
<stop> Opritoarele pentru un gradient offset="the offset for this stop (0 to 1/0% to 100%) ". Required.
stop-color="the color of this stop"
stop-opacity="the opacity of this stop (0 to 1) "
style Permite foi de stil care urmează să fie încorporate direct în conținutul SVG  
<svg> Creează un fragment de document SVG x="top left corner when embedded (default 0) "
y="top left corner when embedded (default 0) "
width="the width of the svg fragment (default 100%) "
height="the height of the svg fragment (default 100%) "
viewBox="the points "seen" in this SVG drawing area. 4 values 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'. Magnify option allows users to pan and zoom your file (default magnify) "
xml="outermost <svg> 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 
symbol 
<text> Definește un text x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. If 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 which moves the characters relative to the absolute position of the last glyph drawn. (see x) "
dy="a list of lengths which 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. Additional characters are NOT given the last rotation value"
textLength="a target length for the text that the SVG viewer will attempt 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 try 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 O descriere numai text pentru elemente în SVG - nu este afișat ca parte a graficii. Agentii utilizator pot afișa textul ca tooltip  
<tref> Referințe orice <text> element din document SVG și reutiliza Identical to the <text> element
<tspan> Identic cu <text> Elementul , dar poate fi imbricate în interiorul tag - uri de text și în interiorul său Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> Foloseste un URI de referință a <g>, <svg> sau alt element grafic cu un id atribut unic si reproduc. Copia este doar o trimitere la original astfel încât există numai originalul în document. Orice modificare a originalului afectează toate copiile. x="the x-axis top-left corner of the cloned element"
y="the y-axis top-left corner of the cloned element"
width="the width of the cloned element"
height="the height of the cloned element"
xlink:href="a URI reference to the cloned element"

+ presentation attributes:
All
view 
vkern