مقدمة لعناصر الشكل المحددة مسبقًا باستخدام SVG و SVG في HTML

تعليق: إذا كان رمز SVG في HTML ، فسيكون من الأسهل بالنسبة لنا أن نكتب JavaScript للتحكم في تحويل الرسم البياني. فيما يلي بعض عناصر الشكل المحددة مسبقًا من SVG. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا لك.

<inmbed src = "rect.svg" height = "100"

اكتب = "Image/SVG+XML"

pluginspage = "http://www.adobe.com/svg/viewer/install/"/>

تشير خاصية PluginsPage إلى عنوان URL الخاص بالمكون الإضافي للتنزيل.

<كائن بيانات = "rect.svg" width = "300"

اكتب = "Image/SVG+XML"

CodeBase = "http://www.adobe.com/svg/viewer/install/"/>

<iframe src = "rect.svg" height = "100">

</frame>

من بين هؤلاء الثلاثة <Frame> علامة مبكرة ، والآن يتم استخدامها أقل. الشخص الذي يستخدم المزيد هو علامة <mbed>.

في الوقت نفسه ، يمكننا أيضًا كتابة SVG مباشرة في ملف HTML:

وبهذه الطريقة ، تحتاج أولاً إلى تقديم ملف SVG DTD:

<؟ xml version = "1.0" standalone = "no"؟>

<! doctype svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

ثم املأ الكود المطلوب في علامة <SVG>:

<svg version = "1.1"

xmlns = "http://www.w3.org/2000/svg">

<ellipse cx = "240" cy = "100" rx = "220" ry = "30"

النمط = "Fill: Yellow"/>

<lelipse cx = "220" cy = "100" rx = "190" ry = "20"

النمط = "Fill: White"/>

</svg>

إذا كان رمز SVG في HTML ، فمن الأسهل علينا كتابة JavaScript للتحكم في تحويل الرسم البياني:

<script type = "text/javaScript">

وظيفة CCC () {

var a = document.getElementById ("W1") ؛

A.Style.Fill = "Red" ؛

A.SetAttribute ("CX" ، "150") ؛ // اضبط القيمة

A.SetAttribute ("Ry" ، "50") ؛ // اضبط القيمة

}

</script>

فيما يلي بعض عناصر الشكل المحددة مسبقًا لـ SVG:

المستطيل <rect>

دائرة <Circle>

القطع الناقص <Lelipse>

خط <Line>

polyline <polyline>

المضلع <polygon>

PATH <PATH>