سكربتات JavaScript لـ SVG

يمكنك كتابة سكربت SVG باستخدام JavaScript. من خلال كتابة السكربت، يمكنك تعديل عناصر SVG، إعداد حركاتها، أو الاستماع إلى أحداث الفأرة على الأشكال. وعندما يتم دمج SVG في صفحة HTML، يمكنك استخدام عناصر SVG في JavaScript.

يمكنك كتابة سكربت SVG باستخدام JavaScript. من خلال كتابة السكربت، يمكنك تعديل عناصر SVG، إعداد حركاتها، أو الاستماع إلى أحداث الفأرة على الأشكال.

عندما يتم دمج SVG في صفحة HTML، يمكن استخدام عناصر SVG في JavaScript كما لو كانت عناصر HTML. يبدو JavaScript بنفس الشكل.

هذا المقال يوضح لك كيفية التعامل مع عناصر SVG باستخدام JavaScript عبر أمثلة، ولكن لم يشرح لغة JavaScript نفسها. لتفهم الأمثلة في هذا المقال، يجب أن تكون قد اكتسبت فهمًا جيدًا لـ JavaScript.

SVG脚本示例

مثال على سكربت SVG

<svg width="500" height="100">
　　　　هذا مثال بسيط على كتابة سكربت SVG، حيث يتم تغيير حجم المربع SVG عند النقر على الزر.
　　　　　　　　　　<rect id="rect1" x="10" y="10" width="50" height="80"
</svg>
style="stroke:#000000; fill:none;"/>
　　　　　　　　　　　　<input id="button1" type="button" value="Change Dimensions"
<script>
　　　　onclick="changeDimensions()"/>
　　　　　　　　function changeDimensions() {
　　　　}
</script>

document.getElementById("rect1").setAttribute("width", "100");

تجربة النقر على الزر لمعرفة ما سيحدث.

الحصول على إشارة إلى العنصر SVG من خلال ID

var　svgElement　=　document.getElementById("rect1");

في هذا المثال يتم الحصول على إشارة إلى العنصر SVG المحدد (المحدد في خاصية id العنصر SVG). يمكنك استخدام دالة document.getElementById() للحصول على إشارة إلى شكل SVG. إليك مثال:

تغيير قيمة الخاصية

بمجرد الحصول على إشارة إلى العنصر SVG، يمكنك استخدام دالة setAttribute() لتغيير خصائصه. إليك مثال:

var svgElement = document.getElementById("rect1");svgElement.setAttribute("width", "100");

في هذا المثال يتم تعيين خاصية width للعنصر SVG المحدد. يمكنك استخدام دالة setAttribute() لتعيين أي خاصية أخرى، بما في ذلك خاصية style.

يمكنك أيضًا استخدام دالة getAttribute() للحصول على قيمة الخاصية. إليك مثال:

var svgElement = document.getElementById("rect1");var width = svgElement.getAttribute("width");

تغيير الخاصية CSS

من خلال استخدام خاصية style للعنصر SVG يمكن تغيير خصائص CSS للعنصر SVG. إليك مثال على تعيين خاصية stroke CSS:

var　svgElement　=　document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";

您也可以通过这种方式设置任何其他CSS属性。只需将其名称放在svgElement.style.　上面第二行的后面，然后将其设置为某种值即可。

您还可以通过style属性读取CSS属性的值。这是一个示例：

var　svgElement　=　document.getElementById("rect1");
var　stroke　=　svgElement.style.stroke;

本示例读取stroke CSS属性的值。

名称中包含短划线的CSS属性名称（例如stroke-width）需要通过['']构造进行引用。这样做是因为带有短划线的属性名称在JavaScript中无效。因此你不能写

element.style.stroke-width

相反，你必须写

element.style['stroke-width']

这样，您还可以使用名称中的破折号来引用CSS属性。

事件监听器

您可以根据需要直接在SVG中将事件监听器添加到SVG形状中。就像使用HTML元素一样进行操作。这是一个添加onmouseover 和 onmouseout事件监听器的示例：

<svg width="500" height="100">　　　　
　　　　
</svg>

此示例在鼠标悬停在矩形上时更改笔触颜色和笔触宽度，并在鼠标离开矩形时重置笔触颜色和笔触宽度。您可以尝试下面的示例。尝试将鼠标移到形状上，然后再次移出，以查看事件监听器的效果。

您还可以使用addEventListener()　函数将事件监听器附加到SVG元素。这是一个示例：

var　svgElement　=　document.getElementById("rect1");
svgElement.addEventListener("mouseover",　mouseOver);
function　mouseOver()　{
　　　　alert("event　fired!");
}

هذا المثال يضيف وظيفة استماع إلى الحدث MouseOver إلى الحدث MouseOver. هذا يعني، بمجرد أن يضع المستخدم الفأرة على عنصر SVG، يتم استدعاء وظيفة المستمع إلى الحدث.

شكل SVG متحرك

لجعل شكل SVG يحتوي على تأثير رسوم متحركة، تحتاج إلى تكرار استدعاء وظيفة JavaScript. وظيفة JavaScript تستخدم لتغيير موقع أو حجم الشكل. عند تكرار استدعاء الوظيفة وتقليل الفترات الزمنية بين الاستدعاءات، يتم تحديث موقع أو حجم الشكل بتكرارات زمنية قصيرة، مما يجعل الشكل يبدو كأنه يحتوي على رسوم متحركة.

هذا مثال على رسوم متحركة SVG سكريبت. في الأسفل من المثال يظهر الكود الذي أنشأه. اضغط على الزرين تحت الصورة SVG لبدء وتوقف الرسوم المتحركة.

هذا هو الكود المطلوب لإنشاء الرسوم المتحركة المذكورة أعلاه:

<svg width="500" height="100">
　　　　<circle id="circle1" cx="20" cy="20" r="10"
　　　　　　　　　　　　style="stroke: none; fill: #ff0000;"/>
</svg>
<script>
　　　　var timerFunction = null;
　　　　function startAnimation()　{
　　　　　　　　if(timerFunction == null)　{
　　　　　　　　　　　　timerFunction = setInterval(animate, 20);
　　　　　　　　}
　　　　}
　　　　function stopAnimation()　{
　　　　　　　　if(timerFunction != null){
　　　　　　　　　　　　clearInterval(timerFunction);
　　　　　　　　　　　　timerFunction = null;
　　　　　　　　}
　　　　}
　　　　function animate()　{
　　　　　　　　var circle = document.getElementById("circle1");
　　　　　　　　var x = circle.getAttribute("cx");
　　　　　　　　var newX = 2 + parseInt(x);
　　　　　　　　if(newX > 500)　{
　　　　　　　　　　　　newX = 20;
　　　　　　　　}
　　　　　　　　circle.setAttribute("cx",　newX);
　　　　}
</script>
<br/>
<input type="button" value="بدء الرسوم المتحركة" onclick="startAnimation();">
<input type="button" value="توقف الرسوم المتحركة" onclick="stopAnimation();">

تم إضافة مستمعين للنقر إلى هذين الأزرار HTML. يتم استدعاء الدوال startAnimation() و stopAnimation() من قبل هذين المستمعين، وهي تستخدم لبدء وإيقاف الحركة. تبدأ الحركة بإعداد ميتير (تايمر) يُستدعى دالة Animate() كل 20 ميليسي ثانية. يمكن إيقاف هذا الميتير لإيقاف الحركة.

يتم تنفيذ الحركة في داخل دالة animate(). أولاً، تحصل الدالة على استدعاء لعدد من العناصر باستخدام دالة document.getElementById(). ثم، تقرأ خاصية cx للدائرة وتحويلها إلى عدد. ثم، يتم إضافة 2 إلى قيمة cx. إذا كان القيمة الجديدة للx أكبر من 500، يتم إعادة تعيينها إلى 20. في النهاية، يتم وضع القيمة الجديدة للx في خاصية cx لعنصر <circle>. وبالتالي، تتحرك الدائرة إلى موقع x الجديد.