يعد تحسين التعليمات البرمجية دائمًا حاجة دائمة للمبرمجين، ويعد الاستخدام المعقول لصور SVG لاستبدال بعض الصور بتنسيق PNG/JPG والتنسيقات الأخرى جزءًا مهمًا من تحسين الواجهة الأمامية نظرًا لأنه تحسين، فلنلقي نظرة أولاً على صور SVG ما هي المزايا:
يمكن قراءة وتعديل ملفات SVG بواسطة العديد من الأدوات (مثل المفكرة)
بعض الأمثلة الصغيرة لصور SVG:
دعونا نلقي نظرة على الكود الخاص بأيقونة المشاركة الثالثة:
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g السكتة الدماغية=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235 خط السكتة الدماغية = جولة /> <المسار d = M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
يجب أن يكون لدى الطلاب الذين لا يفهمون SVG علامات استفهام على وجوههم الآن، تمامًا مثل المرة الأولى التي التقيت بهم. لا تقلق، فلنبدأ من الأساسيات.
ما هو SVG؟SVG هو تنسيق صورة يعتمد على بناء جملة XML، واسمه الكامل هو Scalable Vector Graphics. تعتمد تنسيقات الصور الأخرى على معالجة البكسل، وSVG هو وصف لشكل الصورة، لذا فهو في الأساس ملف نصي بحجم صغير ولن يتم تشويهه مهما عدد مرات تكبيره. بالإضافة إلى ذلك، فإن SVG هو أحد معايير اتحاد شبكة الويب العالمية، كما أن SVG مدمج مع معايير W3C مثل DOM وXSL.
كيفية الاستخدام؟في HTML5، يمكنك تضمين عناصر SVG مباشرة في صفحات HTML، مثل القلب الأحمر الصغير أعلاه:
<body> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <المعرف الصحيح=ay=54 العرض=60 الارتفاع=25 rx=1/> <معرف القناع=bx=0 y=0 العرض=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g converter=translate(-9 -56) fill=none fill-rule=evenodd> <use السكتة الدماغية= قناع #EDEEEF=url(#b)stroke-width=2 xlink:href=#a/> <path d=M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z fill=red/> </g> </svg></body>
يمكن أيضًا كتابة كود SVG في ملف ينتهي بـ .svg، ثم إدراجه في صفحة الويب باستخدام علامات مثل <img> و <object> و <embed> و <iframe> .
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
يمكن لـ CSS أيضًا استخدام svg
الشعار { الخلفية: url(logo.svg);}يمكن أيضًا تحويل ملفات SVG إلى ترميز BASE64 ثم كتابتها على صفحات الويب كمعرفات URI للبيانات.
<img src=data:image/svg+xml;base64,[data]>بناء جملة SVG
1. علامة <svg>
يتم وضع كود SVG في علامة المستوى الأعلى <svg> . أدناه مثال.
<svg width=100% height=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
تحدد سمات العرض والارتفاع لـ <svg> عرض وارتفاع صورة SVG في عنصر HTML. بالإضافة إلى الوحدات النسبية، يمكن أيضًا استخدام الوحدات المطلقة (الوحدة: البكسل). إذا لم يتم تحديد هاتين السمتين، فإن الحجم الافتراضي لصورة SVG هو 300 بكسل (عرض) × 150 بكسل (ارتفاع).
إذا كنت تريد فقط عرض جزء من صورة SVG، فحدد سمة viewBox.
<svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
تحتوي قيمة السمة <viewBox> على أربعة أرقام، وهي الإحداثي والإحداثي في الزاوية اليسرى العليا، وعرض إطار العرض وارتفاعه. في الكود أعلاه، يبلغ حجم صورة SVG 100 بكسل عرضًا × 100 بكسل ارتفاعًا، وتحدد سمة viewBox أن إطار العرض يبدأ من النقطة (50، 50). إذن، ما تراه في الواقع هو ربع الدائرة في الزاوية اليمنى السفلية.
لاحظ أن إطار العرض يجب أن يتناسب مع المساحة الموجودة فيه. في الكود أعلاه، يكون حجم إطار العرض 50 × 50. وبما أن حجم صورة SVG هو 100 × 100، فسيتم تكبير إطار العرض ليناسب حجم صورة SVG، أي أنه سيتم تكبيره أربع مرات .
إذا لم تحدد سمة العرض وسمة الارتفاع وقمت فقط بتحديد سمة viewBox، فهذا يعادل إعطاء نسبة العرض إلى الارتفاع لصورة SVG فقط. في هذه الحالة، سيكون الحجم الافتراضي لصورة SVG مساويًا لحجم عنصر HTML الذي تحتوي عليه.
2. علامة <circle>
تمثل العلامة <circle> دائرة.
<svg width=300 height=180> <circle cx=30 cy=50 r=25 /> <circle cx=90 cy=50 r=25 class=red /> <circle cx=150 cy=50 r=25 class = خيالي /></svg>
يحدد الكود أعلاه ثلاث دوائر. سمات cx وcy وr للعلامة <circle> هي الإحداثي الإحداثي ونصف القطر على التوالي، والوحدة هي البكسل. الإحداثيات مرتبطة بأصل الزاوية اليسرى العليا من لوحة <svg> .
يتم استخدام سمة الفئة لتحديد فئة CSS المقابلة.
.red {ملء: أحمر؛}.fancy {ملء: لا شيء؛ الحد: أسود؛ عرض الحد: 3pt؛}تختلف خصائص CSS لـ SVG عن خصائص عناصر الويب.
ملء: ملء اللون
السكتة الدماغية: لون السكتة الدماغية
عرض الحد: عرض الحدود
3. علامة <line>
يتم استخدام علامة <line> لرسم خطوط مستقيمة.
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style=stroke:rgb(0,0,0);stroke-width:5 /></svg>
في الكود أعلاه، تمثل السمة x1 والسمة y1 للعلامة <line> إحداثيات الإحداثيات الإحداثية لنقطة البداية لمقطع الخط؛ وتمثل السمة x2 والسمة y2 إحداثيات الإحداثيات والإحداثيات لنقطة نهاية المقطع قطعة الخط؛ تمثل سمة النمط نمط قطعة الخط.
4. علامة <polyline>
يتم استخدام علامة <polyline> لرسم خط متعدد الخطوط.
<svg width=300 height=180> <نقاط متعددة الخطوط=3,3 30,28 3,53 fill=لا شيء=أسود /></svg>
تحدد سمة النقاط <polyline> إحداثيات كل نقطة نهاية ويتم الفصل بين الإحداثيات والإحداثيات بفواصل، ويتم فصل النقاط بمسافات.
5. علامة <rect>
يتم استخدام العلامة <rect> لرسم المستطيلات.
<svg width=300 height=180> <rect x=0 y=0 height=100 width=200 style=stroke: #70d5dd; fill: #dd524b /></svg>
تحدد السمة x والسمة y لـ <rect> إحداثيات الإحداثيات والإحداثيات لنقطة نهاية الزاوية اليسرى العليا للمستطيل؛ وتحدد سمات العرض والارتفاع العرض والارتفاع (وحدة البكسل) للمستطيل.
6. علامة <ellipse>
يتم استخدام علامة <ellipse> لرسم علامات الحذف.
<svg width=300 height=180> <القطع الناقص cx=60 cy=60 ry=40 rx=20 السكتة الدماغية=عرض الحد الأسود=5 تعبئة=فضي/></svg>
تحدد السمة cx والسمة cy لـ <ellipse> إحداثيات الإحداثيات الإحداثية لمركز القطع الناقص (وحدة البكسل)؛ وتحدد السمة rx والسمة ry نصف قطر المحاور العرضية والطولية للقطع الناقص (وحدة البكسل).
7. علامة <polygon>
يتم استخدام علامة <polygon> لرسم المضلعات.
<svg width=300 height=180> <ملء المضلع=حد أخضر=عرض حد برتقالي=1 نقطة=0,0 100,0 100,100 0,100 0,0/></svg>
تحدد سمة النقاط <polygon> إحداثيات كل نقطة نهاية ويتم الفصل بين الإحداثيات والإحداثيات بفواصل، ويتم فصل النقاط بمسافات.
8. علامة <path>
يتم استخدام العلامة <path> لتحديد المسار.
<svg width=300 height=180><path d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></path></svg >
تمثل السمة d لـ <path> ترتيب الرسم، وقيمتها عبارة عن سلسلة طويلة، ويمثل كل حرف إجراء رسم، متبوعًا بالإحداثيات.
م: الانتقال إلى (الانتقال)
L: ارسم خطًا مستقيمًا إلى (lineto)
Z: طريق مغلق
9. علامة <text>
يتم استخدام العلامة <text> لرسم النص.
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
تمثل سمات x وy لـ <text> الإحداثي والإحداثي لنقطة البداية للخط الأساسي لكتلة النص. يمكن تحديد نمط النص باستخدام سمات الفئة أو النمط.
10. علامة <use>
يتم استخدام العلامة <use> لنسخ الشكل.
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=حد أبيض=blue /></svg>
تحدد السمة href لـ <use> العقدة المراد نسخها، والسمة x والسمة y هي إحداثيات الزاوية اليسرى العليا لـ <use> . بالإضافة إلى ذلك، يمكنك أيضًا تحديد إحداثيات العرض والارتفاع.
11. العلامة <g>
يتم استخدام العلامة <g> لتجميع أشكال متعددة في مجموعة لسهولة إعادة استخدامها.
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=حد أبيض=أزرق /></svg>
12. علامة <defs>
يتم استخدام العلامة <defs> للأشكال المخصصة ولن يتم عرض الكود الموجود بداخلها وهو كمرجع فقط.
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=حد أبيض=أزرق /></svg>
13. علامة <pattern>
يتم استخدام العلامة <pattern> لتخصيص شكل يمكن الرجوع إليه لتجانب منطقة ما.
<svg width=500 height=500> <defs> <pattern id=dots x=0 y=0 width=100 height=100 PatternUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <rect x=0 y=0 width=100% height=100% fill=url(#dots) /></svg>
في الكود أعلاه، تحدد العلامة <pattern> الدائرة كنمط نقاط. patternUnits=userSpaceOnUse يعني أن عرض وطول <pattern> هما قيمتان فعليتان للبكسل. ثم قم بتعيين هذا الوضع لملء المستطيل السفلي.
14. علامة <image>
يتم استخدام العلامة <image> لإدراج ملفات الصور.
<svg viewBox=0 0 100 100 width=100 height=100> <image xlink:href=path/to/image.jpg width=50% height=50%/></svg>
في الكود أعلاه، تشير سمة xlink:href الخاصة بـ <image> إلى مصدر الصورة.
15. علامة <animate>
يتم استخدام علامة <animate> لإنتاج تأثيرات الرسوم المتحركة.
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animate attributeName=x from=0 to=500 dur=2s RepeatCount=indefinite /> </rect ><</svg>
في الكود أعلاه، سيستمر المستطيل في التحرك وإنتاج تأثيرات الرسوم المتحركة.
سمات <animate> لها المعاني التالية.
attributeName: اسم السمة التي يحدث فيها تأثير الحركة.
من: القيمة الأولية لرسوم متحركة واحدة.
إلى: القيمة النهائية لرسوم متحركة واحدة.
dur: مدة الرسوم المتحركة الواحدة.
RepeatCount: وضع حلقة الرسوم المتحركة.
يمكن تعريف الرسوم المتحركة على خصائص متعددة.
<اسم السمة المتحركة=x من=0 إلى=500 dur=2s RepeatCount=indefinite /><animate attributeName=width to=500 dur=2s RepeatCount=indefinite />
16. علامة <animateTransform>
ليس للعلامة <animate> أي تأثير على سمة التحويل في CSS. إذا كان التحويل مطلوبًا، فيجب استخدام العلامة <animateTransform>.
<svg width=500px height=500px> <rect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransform attributeName=transform type=Rotate begin=0s dur=10s from=0 200 200 to=360 400 400 RepeatCount=indefinite /> </rect></svg>
في الكود أعلاه، يكون تأثير <animateTransform> هو التدوير. في هذا الوقت، تحتوي قيم السمة from وto على ثلاثة أرقام، الرقم الأول هو قيمة الزاوية، والقيمتان الثانية والثالثة هما إحداثيات مركز الدوران. من = 0 200 200 تعني أن الزاوية في البداية هي 0، ويبدأ الدوران حول (200، 200)؛ إلى = 360 400 400 يعني أن الزاوية في النهاية هي 360، ويبدأ الدوران حول (400)؛ ، 400).
1. عمليات DOM
إذا تمت كتابة كود SVG مباشرة في صفحة ويب HTML، فإنه يصبح جزءًا من DOM لصفحة الويب ويمكن معالجته مباشرة باستخدام DOM.
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600 PreventAspectRatio=xMidYMid meet> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
بعد إدراج الكود أعلاه في صفحة الويب، يمكنك استخدام CSS لتخصيص النمط.
دائرة { عرض الحد: 5؛ الحد: #f00؛ ملء: #ff0؛} دائرة: تحوم { السكتة الدماغية: #090؛}يمكن بعد ذلك معالجة SVG باستخدام كود JavaScript.
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('تم النقر على الدائرة - تكبير'); mycircle.setAttribute('r', 60);}, خطأ شنيع)؛يحدد الكود أعلاه أنه إذا تم النقر على الرسم، فسيتم إعادة كتابة السمة r لعنصر الدائرة.
2. احصل على SVG DOM
استخدم علامات <object> و <iframe> و <embed> لإدراج ملفات SVG للحصول على SVG DOM.
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();لاحظ أنه إذا استخدمت العلامة <img> لإدراج ملف SVG، فلن تتمكن من الحصول على SVG DOM.
3. اقرأ كود مصدر SVG
نظرًا لأن ملف SVG عبارة عن جزء من نص XML، فيمكن قراءة كود مصدر SVG من خلال قراءة كود XML.
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=عرض العرض=500 height=440 > <!-- كود svg --> </svg></div>
استخدم طريقة serializeToString() لمثيل XMLSerializer للحصول على رمز عنصر SVG.
var svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));4. تحويل صورة SVG إلى صورة قماشية
أولاً، تحتاج إلى إنشاء كائن صورة جديد وتعيين صورة SVG إلى سمة src لكائن الصورة.
var img = new Image();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL ||. var url = DOMURL.createObjectURL(svg);img.src = url; وبعد ذلك، عند تحميل الصورة، ارسمها إلى عنصر <canvas> .
img.onload = function () { var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d'); ctx.drawImage(img, 0, 0);}; ملخصيمكن لـ SVG أن تفعل أكثر من ذلك بكثير، وسنشرح تأثيرات الرسوم المتحركة وتأثيرات النص التي تم إنشاؤها باستخدام SVG بالتفصيل لاحقًا، ولكن دعونا نتوقف هنا اليوم.
console.log('右下角点好看呦')ما ورد أعلاه هو المحتوى الكامل لهذه المقالة، وآمل أن يكون مفيدًا للدراسة للجميع، وآمل أيضًا أن يدعم الجميع Script Home.