مقالة مقدمة من wulin.com (www.vevb.com): اسم SVG الكامل هو رسومات متجه قابلة للتطوير. إذا كنت قد استخدمت Adobe Illustrator ، أعتقد أنك لست على دراية بهذا التنسيق المناسب من الصور!
قبل أن نبدأ في استخدام SVG ، دعونا نلقي نظرة على SVG أولاً وشرح سبب استخدامنا SVG.
الاسم الكامل لـ SVG هو رسومات متجه قابلة للتطوير. إذا كنت قد استخدمت Adobe Illustrator ، أعتقد أنك لست على دراية بهذا التنسيق المناسب من الصور!
لماذا تستخدم SVG؟ دعم المتصفحإذا كنت بحاجة إلى دعم هذه الإصدارات من المتصفح ، فيمكنك استخدام Modernizr على النحو التالي:
if (! modernizr.svg) {
$ (.
}
أو استخدم رمز أبسط التالي:
<img src = gblogo.svg onerror = this.onerror = null ؛ this.src = gblogo.png>
يتم استخدام ملفات SVG كصور عامةيمكنك استخدامه مباشرة كصورة ، على النحو التالي:
<img src = logo.svg href = class = logo>
csswang.com
</a>
رمز CSS:
.logo {
عرض:
استقلال النص:
عرض:
ارتفاع:
خلفية:
حجم الخلفية:
}
باستخدام SVG في الخطيمكنك نسخ رمز SVG مباشرة في الجسم وسترى الصورة ، على النحو التالي:
<body>
<!-انسخ رمز SVG هنا وسيتم عرض الصورة->
</body>
السيطرة على SVG مع CSSيمكنك استخدام CSS للتحكم في ملف SVG. سيتحكم الرمز التالي في لون الخلفية للصورة عند تعليق الماوس:
<g class = transform = Translate (0.000000،500.000000) مقياس (0.100000 ، -0.100000)
ملء =#00000 السكتة الدماغية = لا شيء>
يحدد الكود أعلاه فئة من الشعار ، ويمكننا تحديده في CSS على النحو التالي:
.logo: تحوم {
يملأ:
...
}
لاحظ أنه في SVG نستخدم Fill بدلاً من الخلفية لتحديد لون الخلفية.
يمكنك حتى استخدام المرشحات للتحكم في الغموض ، على النحو التالي:
.logo: تحوم {
يملأ:
فلتر:
}
عند استخدام الماوس لتحوم الصورة ، سيكون التأثير التالي.
تصحيح الأخطاء عبر الإنترنت:
ملخص الأدوات ذات الصلة SVGSVG هو تنسيق صور قوي للغاية يمكن أن يساعدك في معالجة الصور بكفاءة ولديه طريقة عرض رسومات أكثر مرونة وقوية من JPG أو PNG. أعتقد أنه إذا تم تطبيقه في الوقت المناسب ، فسوف يصبح بالتأكيد طريقة معالجة الصور الأكثر شعبية!