English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل مرجعي لـ SVG

دليل SVG الموجود في 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="اسم الخاصية المستهدفة"
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 | "
in2="第二输入图像的混合操作"
feColorMatrixSVG滤镜。适用矩阵转换 
feComponentTransferSVG 滤镜。执行数据的 component-wise 重映射 
feCompositeSVG 滤镜 
feConvolveMatrixSVG 滤镜 
feDiffuseLightingSVG 滤镜 
feDisplacementMapSVG 滤镜 
feDistantLightSVG滤镜。定义一个光源 
feFloodSVG滤镜 
feFuncASVG 滤镜。feComponentTransfer 的子元素 
feFuncBSVG 滤镜。feComponentTransfer 的子元素 
feFuncGSVG 滤镜。feComponentTransfer 的子元素 
feFuncRSVG 滤镜。feComponentTransfer 的子元素 
feGaussianBlurSVG滤镜。执行高斯模糊图像 
feImageSVG滤镜。 
feMergeSVG滤镜。建立在彼此顶部图像层 
feMergeNodeSVG 滤镜。feMerge的子元素 
feMorphologySVG 滤镜。 对源图形执行"fattening" 或者 "thinning" 
feOffsetSVG滤镜。相对其当前位置移动图像 
fePointLightSVG滤镜 
feSpecularLightingSVG滤镜 
feSpotLightSVG滤镜 
feTileSVG滤镜 
feTurbulenceSVG滤镜 
filter滤镜效果的容器 
font                定义字体 
font-face描述一种字体的特点 
font-face-format  
font-face-name  
font-face-src  
font-face-uri  
foreignObject  
用于把相关元素进行组合的容器元素id="该组的名称"
fill="该组填充颜色"
opacity="该组不透明度"
+ الخاصية المظهر:
كل
glyph为给定的象形符号定义图形 
glyphRef定义要使用的可能的象形符号 
hkern  
定义图像x="图像的左上角的x轴坐标"
y="图像的左上角的y轴坐标"
width="图像的宽度". 必须.
height="图像的高度". 必须.
xlink:href="图像的路径". 必须.
+ الخاصية المظهر:
Color, Graphics, Images, Viewports
定义一条线x1="直线起始点x坐标"
y1="直线起始点y坐标"
x2="直线终点x坐标"
y2="直线终点y坐标"
+ الخاصية المظهر:
Color, FillStroke, Graphics, Markers
定义线性渐变。通过使用矢量线性渐变填充对象,并可以定义为水平,垂直或角渐变。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属性的"marker-start","marker-mid"和"marker-end",继承默认情况下或可设置为"none"或定义的标记的URI。您必须先定义标记,然后才可以通过其URI引用。任何一种形状,可以把标记放在里面。他们绘制元素时把它们附加到顶部markerUnits="strokeWidth'或'userSpaceOnUse"。如果是strokeWidth"那么使用一个单位等于一个笔划宽度。否则,标记尺度不会使用同一视图单位作为引用元素(默认为'strokeWidth')"
refx="标记顶点连接的位置(默认为0)"
refy="标记顶点连接的位置(默认为0)"
orient="'auto'始终显示标记的角度。 "auto"将计算某个角度使得X轴一个顶点的正切值(默认为0)
markerWidth=لساتجيا العيةاتليل (العية الساتجيا 3)
markerHeight=لساتجيا العيةاتليل (العية الساتجيا 3)
رؤية "المنطقة الرسومية هذا SVG" بواسطة viewBox="النقاط المختلفة". أربعة قيم مفصولة بفواصل أو مسافات (القيمة الأدنى لx, القيمة الأدنى لy, العرض, الارتفاع)"
+ خصائص العرض:
كل
<mask>السطح التقطيع هو مجموعة من قيم الشفافية والقطع. مثل القطع، يمكنك استخدام الرسومات، النصوص أو المسارات لتحديد جزء من السطح التقطيع. الحالة الافتراضية للسطح التقطيع هي شفافية كاملة، أي في مواجهة السطح التقطيع. في إعدادات الرسمية للسطح التقطيع، يتم تعيين جزء الشفافية للسطح التقطيعmaskUnits="'userSpaceOnUse' أو '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="يستخدم لتسمية هذا النمط بمعرف فريد. ضروري.
patternUnits="userSpaceOnUse' أو 'objectBoundingBox". الثانية قيم X، Y، العرض، الارتفاع ستستخدم جزءًا صغيرًا من حدود الشكل المماثل، ووحدة القياس (%)."
patternContentUnits="'userSpaceOnUse' أو 'objectBoundingBox'"
patternTransform="يسمح بتحويل الكامل للعبرة"
x="مقدار التموضع للنمط، من الزاوية العلوية اليسرى (الافتراضي هو 0)"
y="مقدار التموضع للنمط، من الزاوية العلوية اليسرى (الافتراضي هو 0)"
width="عرض التكرار النمطي (الافتراضي هو 100%)"
height="ارتفاع التكرار النمطي (الافتراضي هو 100%)"
رؤية "المنطقة الرسومية هذا SVG" بواسطة viewBox="النقاط المختلفة". أربعة قيم مفصولة بفواصل أو مسافات (القيمة الأدنى لx, القيمة الأدنى لy, العرض, الارتفاع)"
xlink:href="另一种模式,其属性值是默认值以及任何子类可以继承。递归"
 
定义一个包含至少三边图形points="多边形的点。点的总数必须是偶数"。必需的。
fill-rule="FillStroke演示属性的部分"
+ الخاصية المظهر:
Color, FillStroke, Graphics, Markers
定义只有直线组成的任意形状points=折线上的"点"。必需的。
+ الخاصية المظهر:
Color, FillStroke, Graphics, Markers
定义放射性渐变。放射性渐变创建一个圆圈gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用视图框或对象以确定相对位置的矢量点。 (默认为'objectBoundingBox)"
gradientTransform="适用于渐变的变换"
cx="渐变的中心点(数字或% - 50%是默认)"
cy="渐变的中心点。 (默认50%)"
r="渐变的半径。 (默认50%)"
fx="渐变的焦点。 (默认0%)"
fy="渐变的焦点。 (默认0%)"
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="引用到另一个渐变,其属性值作为默认值。递归"
定义一个矩形x="矩形的左上角的x轴"
y="矩形的左上角的y轴"
rx="x轴的半径(round元素)"
ry="y轴的半径(round元素)"
width="矩形的宽度"。必需的。
height="矩形的高度"。必需的。
+ الخاصية المظهر:
Color, FillStroke, Graphics
script脚本容器。(例如ECMAScript) 
set设置一个属性值指定时间 
渐变停止offset="偏移停止(0到1/0%到100%)". 参考
stop-color="这个stop的颜色"
stop-opacity="这个Stop的不透明度 (0到1)"
style可使样式表直接嵌入SVG内容内部 
创建一个SVG文档片段x="左上角嵌入(默认为0)"
y="左上角嵌入(默认为0)"
width="SVG片段的宽度(默认为100%)"
height="ارتفاع جزء SVG (افتراضي 100%)"
viewBox="نقطة"مرئية" لهذا منطق الرسم SVG. تتكون من أربعة قيم منفصلة بالمسافات أو الثوابت. (أدنى x، أدنى y، العرض، الارتفاع)"
preserveAspectRatio="'none' أو أي من 9 مزيجات 'xVALYVAL'، حيث أن VAL هو 'min'، 'mid' أو 'max'. (الافتراضي none)"
zoomAndPan="'magnify' أو 'disable'. يسمح خيار التكبير للمستخدم بالتمرير والتكبير في ملفك (الافتراضي التكبير)"
xml="كل عناصر <svg> الخارجية يجب أن تحتوي على SVG واسم مجالها: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""
+ الخاصية المظهر:
كل
switch  
symbol  
<text>تحديد نصx="موقع المحور X للقائمة. في النص، في موقع الحرف nth هو nth على المحور X. إذا كان هناك حروف إضافية، يتم وضعها في الموقع الذي يلي آخر حرف. 0 هو القيمة الافتراضية"
y="موقع المحور Y للقائمة. (المرجع x) 0 هو القيمة الافتراضية"
dx="تحريك النص بناءً على الموقع النسبي للعلامة النهائية للرسم في قائمة أطوال الحروف. (المرجع x)"
dy="تحريك النص بناءً على الموقع النسبي للعلامة النهائية للرسم في قائمة أطوال الحروف. (المرجع x)"
rotate="قائمة التدوير. التدوير الرابع هو الحرف الرابع. لا يتم تحديد قيمة التدوير النهائية للحروف الإضافية"
textLength="سيحاول مشاهد SVG عرض مسافة النص بينه وبين النص أو طوله المستهدف للنص (الافتراضي: طوله الطبيعي للنص)"
lengthAdjust="يخبر المشاهد إذا تم تحديد الطول بأن يحاول التكيف مع الطول المحدد لعرض النص. هاتان القيمتان هما 'spacing' و 'spacingAndGlyphs'"
+ الخاصية المظهر:
اللون، التعبئة والرسم، تحديد الخط، عناصر محتوى النص
textPath  
titleوصف النص الخام للعناصر في SVG - وليس كجزء من الرسم. سيقوم وسيط المستخدم بعرضه كنص إرشادي 
<tref>الاستشهاد بأي عنصر <text> في مستند SVG واستعادةعناصر <TEXT> المماثلة
<tspan>العنصر يساوي <text>، لكن يمكنه أن يحتوي على علامات النص الداخلية و العلامات الداخلية نفسهامتماثل مع عنصر <text>
+ إضافي:
xlink:href="الإشارة إلى عنصر <TEXT>"
<use>استخدام URI لتشير إلى <G>, <svg> أو أي عنصر يحتوي على خاصية ID فريدة و عناصر شكل مكررة. يتم نسخ العنصر الأصلي، لذا فإن وجوده في الملف الأصلي هو مجرد مرجع. أي تغيير في الأصلي يؤثر على جميع النسخ.x="على المحور x للجزء العلوي اليسرى العنصر المكرر"
y="على المحور y للجزء العلوي اليسرى العنصر المكرر"
width="عرض العنصر المكرر"
height="ارتفاع العنصر المكرر"
xlink:href="الإشارة إلى URI التكرار العنصر"
+ الخاصية المظهر:
كل
عرض  
vkern