English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
دليل 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="第二输入图像的混合操作" |
feColorMatrix | SVG滤镜。适用矩阵转换 | |
feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射 | |
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 | ||
用于把相关元素进行组合的容器元素 | 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 |