أحدث البرامج التعليمية وتطوير الشبكة
 

SVG مرجع


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="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> يسبب عنصر المشار إليها للتحرك على طول مسار الحركة 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> ينعش سمة التحول على عنصر الهدف، مما يسمح الرسوم المتحركة للسيطرة على الترجمة، والقياس، والتناوب و / أو انحراف 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> وتعرف دائرة 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> لقطة هي حول إخفاء ما يمكن استخلاصها بشكل طبيعي. الاستنسل الذي يعرف ما له وما لا يتم رسمها يسمى مسار لقطة 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> يحدد وصف تعريف الألوان (عند نصب المستند باستخدام 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> يحدد مؤشر مخصصة منصة مستقلة 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> وعاء لعناصر المشار إليها  
<desc> وصف النص فقط لعناصر الحاوية أو العناصر الرسومية في SVG (وكلاء المستخدم قد تعرض النص تلميح)  
<ellipse> تعرف على القطع الناقص 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> يؤلف كائنين معا وفقا لطريقة مزج معين 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 مرشح SVG. وينطبق هذا التحول مصفوفة  
feComponentTransfer مرشح SVG. يؤدي الخارطه مكون الحكمة من البيانات  
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="the name of the group"
fill="the fill color for the group"
opacity="the opacity for the group"

+ presentation attributes:
All
glyph يحدد الرسومات لرسومي معين  
glyphRef يحدد الشكل المنقوش الممكن استخدام  
hkern 
<image> يحدد صورة 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> يحدد خط 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> يعرف الانحدار الخطي. التدرجات الخطية تملأ الكائن باستخدام ناقلات، ويمكن تعريفها بأنها التدرجات أفقية أو رأسية أو الزاوي. 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> علامات يمكن وضعها على رؤوس من الخطوط، الخطوط المتعددة، المضلعات والمسارات. هذه العناصر يمكن استخدام marker سمات "marker-start" ، "marker-mid" و "نهاية علامة" "الذي يرث افتراضيا أو يمكن لمجموعة 'لا شيء' أو URI من علامة محددة. يجب عليك أولا تحديد علامة قبل أن تتمكن من الرجوع إليه عبر أوري لها. يمكن وضع أي نوع من الشكل داخل علامة. تم اختيارهم على أعلى العنصر أنها ملحقة 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> اخفاء هو مزيج من القيم التعتيم ولقطة. مثل قطة يمكنك استخدام الأشكال والنصوص أو مسارات لتحديد الأجزاء من القناع. الحالة الافتراضية قناع شفافة تماما وهو نقيض لقطة الطائرة. الرسومات في قناع تحدد كيف الأجزاء المعتمة من القناع 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 يحدد الفوقية  
missing-glyph 
mpath 
<path> يحدد مسار 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> يحدد الإحداثيات التي تريد العرض لإظهار وحجم العرض. ثم قمت بإضافة الأشكال في النمط الخاص بك. يكرر نمط عند حافة ترى مربع (viewing area) هو ضرب 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> يحدد الرسم الذي يحتوي على ثلاثة على الاقل من الجانبين 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> يعرف أي الشكل الذي يتكون من خطوط مستقيمة فقط points="the points on the polyline". Required.

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<radialGradient> تعرف شعاعي الانحدار. يتم إنشاء التدرجات شعاعي من خلال اتخاذ دائرة وسلاسة تغيير القيم بين علامات الانحدار من وجهة التركيز إلى دائرة نصف قطرها الخارجي. 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> تعرف على شكل مستطيل 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 حاوية للمخطوطات (eg, ECMAScript)  
set يحدد قيمة سمة لفترة محددة  
<stop> توقف عن التدرج 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 يسمح أوراق الأنماط لتكون جزءا لا يتجزأ مباشرة داخل محتوى SVG  
<svg> يخلق وثيقة جزء 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> يحدد النص 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 وصف النص فقط لعناصر في SVG - لا يتم عرض كجزء من الرسومات. قد يعرض وكلاء المستخدم النص تلميح  
<tref> المراجع أي <text> عنصر في وثيقة SVG وإعادة استخدامها Identical to the <text> element
<tspan> مطابقة لل <text> العنصر ولكن يمكن أن تتداخل داخل علامات النص وداخل نفسه Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> يستخدم URI مرجع <ز>، <svg> أو غيرها من العناصر الرسومية مع سمة الهوية الفريدة وتكرار ذلك. نسخة ليست سوى إشارة إلى الأصل وذلك فقط موجودة في الأصل في الوثيقة. أي تغيير في النص الأصلي يؤثر على كل نسخة. 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