درج svg در css. افزودن SVG به صفحه با استفاده از یک برچسب

مقاله مفصل در مورد یک ظاهر طراحی شده در یک عنصر SVG و غلبه بر مشکلات مرتبط

گرافیک در قالب SVG اغلب برای ایجاد آیکون ها استفاده می شود و یکی از رایج ترین تکنیک ها برای این کار، SVG sprites با استفاده از SVG برای نمونه سازی آیکون ها در در جای مناسبسند

نمونه سازی نمادها یا هر محتوای SVG دیگر در یک عنصر هنگام طراحی نسخه های جداگانه مشکلاتی ایجاد می کند. هدف از این مقاله این است که به شما مروری بر برخی از آن ها بدهد راه های ممکندور زدن محدودیت های طراحی مرتبط با استفاده .

اما قبل از شروع، اجازه دهید به سرعت به ساختار اساسی و گروه بندی عناصر در SVG نگاه کنیم، و به تدریج به ، DOM و سپس به CSS برگردید. ما به دلیل طراحی نگاه خواهیم کرد می تواند مشکلاتی ایجاد کند و چگونه بر آنها غلبه کنیم.

مروری سریع بر ساختار SVG، گروه بندی و ارجاع عناصر در SVG

SVG شامل 4 عنصر اساسی برای تعریف، ساختار و پیوند دادن به محتوای SVG در یک سند است. این عناصر امکان استفاده مجدد از تصاویر را فراهم می کنند و در عین حال کد را خوانا و قابل نگهداری نگه می دارند. با توجه به ماهیت SVG، برخی از این عناصر عملکردی مشابه دستورات مربوطه در ویرایشگرهای گرافیکی دارند.

4 عنصر اصلی گروه بندی و پیوند SVG عبارتند از: , , و .

عنصر (مخفف "گروه") برای گروه بندی منطقی مجموعه های مرتبط با هم استفاده می شود عناصر گرافیکی. از نظر ویرایشگرهای گرافیکی (مانند Adobe Illustrator) عنصر عملکرد آن شبیه به عملکرد "گروه اشیاء" است. شما همچنین می توانید یک گروه را به عنوان یک لایه در نظر بگیرید ویرایشگر گرافیکی.

گروه بندی عناصر در مواردی مفید است که می خواهید یک سبک را برای همه عناصر یک گروه اعمال کنید و همچنین زمانی که می خواهید تمام عناصر یک گروه را با حفظ رابطه بین آنها متحرک کنید.

عنصر برای تعریف بسیاری از چیزها استفاده می شود، عمدتاً الگوهایی مانند گرادیان را تعریف می کند، که سپس می تواند برای پر کردن سایر عناصر SVG استفاده شود. می توان از آن برای تعریف هر عنصری که قرار است در هر جایی از بوم استفاده کنید استفاده کرد.

عنصر امکانات را ترکیب می کند و الگویی که برای گروه بندی عناصر با هم استفاده می شود تا الگویی ایجاد کند که بتوان در جای دیگری از سند به آن ارجاع داد. بر خلاف , برای تنظیم الگوها استفاده نمی شود. معمولاً برای ایجاد نمادهایی مانند نمادها استفاده می شود که سپس در سراسر سند استفاده می شود.

در عنصر یک چیز دیگر وجود دارد مزیت مهم: یک ویژگی viewBox را می پذیرد که امکان بزرگنمایی در هر محدوده ای را فراهم می کند.

عنصر به شما امکان می دهد از یک عنصر تعریف شده قبلی در هر نقطه از سند استفاده کنید. به شما امکان می دهد از عناصر استفاده مجدد کنید و عملکردی مشابه کپی پیست در یک ویرایشگر گرافیکی ارائه می دهد. می توان از آن به عنوان استفاده کرد عنصر جداگانه، و گروه تعریف شده در , یا .

برای استفاده از یک عنصر باید پیوندی به این عنصر ارسال کنید، شناسه ویژگی xlink:href است و آن را با تنظیم ویژگی‌های x و y قرار دهید. می توانید استایل ها را روی یک عنصر اعمال کنید و آنها بر روی محتوای این عنصر آبشاری خواهند کرد.

اما محتوا چیست؟ ? از کجا کلون می شود؟ و CSS cascade چگونه با آن کار می کند؟

قبل از پاسخ به این سؤالات، و با توجه به اینکه ما فقط نگاهی گذرا به ساختار و گروه بندی SVG داشته ایم، لازم است به چند مقاله اشاره کنیم که به شما امکان می دهد در مورد این عناصر و همچنین ویژگی viewBox در یک عنصر اطلاعات بیشتری کسب کنید. :

• ساختار، گروه بندی و پیوند در SVG - عناصر g، استفاده، defs و نماد
• درک سیستم مختصات SVG (قسمت 1): Viewport، viewBox و PreserveAspectRatio

SVG و DOM را سایه بزنید

وقتی به عنصری با ، کد شما چیزی شبیه به این است:

آیکونی روی صفحه نمایش داده می شود که محتوای آن به صورت داخلی تعریف شده است ، اما در واقع محتوای عنصر است ، که یک کلون است .

اما عنصر این فقط یک عنصر خود بسته است - هیچ محتوایی بین تگ های باز و بسته وجود ندارد، بنابراین محتوا از کجا کلون می شود؟ ?

پاسخ در است سایه DOM(به دلایلی من همیشه او را با بتمن مرتبط می کنم، نمی دانم چرا).

Shadow DOM چیست؟

سایه DOM مشابه DOM معمولی است، با این تفاوت که گره‌های سایه DOM به جای اینکه بخشی از درخت سند اصلی باشند، به بخشی از سند اشاره می‌کنند که موازی با سند اصلی است، اما برای اسکریپت‌ها و سبک‌های آن قابل دسترسی نیست. این به نویسندگان فرصت ایجاد می دهد اجزای مدولار، کپسوله کردن اسکریپت ها و سبک ها. اگر تا به حال از یک عنصر ویدیویی یا ورودی محدوده در HTML5 استفاده کرده اید و متوجه نشده اید که پخش کننده ویدیو یا کنترل های لغزنده از کجا آمده است، پاسخ یکسان است - سایه DOM.

در مورد یک عنصر SVG ، محتوایی که به آن اشاره می کند در یک قطعه سند "میزبانی" در آن کلون می شود . که در در این مورد این یک میزبان سایه است.

بنابراین مطالب (کلون یا کپی عنصری که به آن اشاره دارد) در قطعه سند سایه وجود دارد.

به عبارت دیگر، محتوا وجود دارد، اما نامرئی است. همانند محتویات DOM معمولی، اما برای ویژگی‌های سطح بالا مانند انتخابگرهای CSS و جاوا اسکریپت قابل دسترسی نیست، در یک قطعه سند کپی شده است. .

حالا، اگر شما یک طراح هستید، ممکن است فکر کنید، "باشه، متوجه شدم، اما آیا راهی برای بررسی این سند فرعی و دیدن محتوای آن وجود دارد." پاسخ این است که بله، شما می توانید محتویات DOM سایه را با استفاده از ابزارهای توسعه در کروم (در فایرفاکس در این لحظهاین تابع در دسترس نیست). اما ابتدا باید بازرس سایه DOM را در تب General در پنل تنظیمات فعال کنید. این به تفصیل شرح داده شده است.

هنگامی که Shadow DOM Inspection را در Developer Tools فعال کردید، می توانید عناصر کلون شده را در جعبه ابزار مشاهده کنید، درست مانند عناصر DOM معمولی. تصویر زیر یک عنصر نمونه را نشان می دهد ، ارجاع به محتوای عنصر . لطفاً توجه داشته باشید که "#shadow-root" و محتویات آن یک کلون از مطالب است .

با استفاده از ابزار توسعه دهنده کروم، می توانید محتویات عنصر use را در داخل سایه DOM بررسی کنید ("#shadow-root"، خط خاکستری شده است). این اسکرین شات لوگوی Codrops را از مثالی که در بخش بعدی بررسی خواهیم کرد، بررسی می کند.

با نگاهی به کد بازرسی شده، می بینید که DOM سایه بسیار شبیه DOM معمولی است، به جز نحوه مدیریت آن توسط CSS و جاوا اسکریپت سند اصلی. همچنین تفاوت های دیگری نیز بین این دو وجود دارد که به دلیل طولانی بودن در این مقاله به آنها نمی پردازیم، بنابراین اگر می خواهید بیشتر بدانید، مقالات زیر را توصیه می کنم:

• Shadow DOM 101 (ترجمه شده توسط Frontender.info)
• مقدمه ای بر Shadow DOM (ویدئو)

با توجه به تجربه محدود من با DOM سایه، من آن را به عنوان یک DOM معمولی می بینم که باید از نظر دسترسی CSS و جاوا اسکریپت به عناصر آن به طور متفاوتی مدیریت شود. این چیزی است که هنگام کار با SVG برای ما مهم است: نحوه تأثیرگذاری بر محتوا در داخل سایه DOM، زیرا برای ما مهم است که بتوانیم آن را استایل کنیم. کل نکته استفاده این توانایی ایجاد کپی های مختلف از یک عنصر است و در بیشتر موارد باید بتوانیم هر کپی را به گونه ای متفاوت استایل کنیم. به عنوان مثال، این می تواند یک لوگو در دو تم رنگی یا نمادهای چند رنگ برای تم های رنگی مختلف باشد. بنابراین برای ما مهم است که بتوانیم این کار را با CSS انجام دهیم.

همانطور که گفته شد، بر خلاف DOM معمولی، محتوای DOM سایه برای CSS قابل دسترسی نیست. پس چگونه آن را استایل کنیم؟ ما نمی توانیم از یک مسیر نزول مانند این استفاده کنیم:

استفاده از مسیر#خط (سکته مغزی: #009966؛ )

زیرا با استفاده از انتخابگرهای معمولی CSS به DOM سایه دسترسی نداریم.

ممکن است انتظار داشته باشید، همانطور که من انجام می دهم، ویژگی های ارائه بالاترین ویژگی را در بین تمام قوانین سبک داشته باشند. از این گذشته، سبک‌های خارجی معمولاً توسط اعلان‌های داخلی بازنویسی می‌شوند و اینها نیز به نوبه خود توسط سبک‌های ویژگی درون خطی بازنویسی می‌شوند - آنها حداکثر ویژگی، و بر این اساس، اولویت را نسبت به سبک‌های دیگر دارند. در حالی که این انتظار منطقی است، مکانیسم واقعی در کار متفاوت است.

در واقع، ویژگی‌های نمایشی به‌عنوان «سبک‌نگارهای نویسنده» سطح پایین تلقی می‌شوند و توسط سایر اعلان‌های سبک بازنویسی می‌شوند: سبک‌های خارجی، داخلی و درون خطی. تنها نقطه قوت آنها اولویت آنها بر سبک های موروثی است. همین.

اکنون که آن را پاک کردیم، بیایید به عنصر خود برگردیم و محتویات آن

ما می‌دانیم که نمی‌توانیم سبک‌ها را درونی تنظیم کنیم استفاده كردن انتخابگرهای CSS.

اما ما همچنین می دانیم که مانند عنصر ، سبک های اعمال شده به به همه فرزندان آن (که در سایه DOM هستند) به ارث می رسد.

بنابراین، ابتدا سعی می کنیم رنگ پر شدن عنصر داخل را تغییر دهیم با اعمال انتخابگر بر روی خود عنصر با این انتظار که آبشار و وراثت کار خود را انجام دهد.

با این حال، این موضوع چند سوال را ایجاد می کند:

1. رنگ پر به ارث می رسد همه نوادگانعنصر ، حتی آنهایی که نمی خواهید استایل ها را روی آن ها اعمال کنید (اما اگر در داخل اگر فقط یک عنصر دارید، این مشکل رخ نخواهد داد).
2. اگر SVG را از یک ویرایشگر گرافیکی صادر کرده‌اید یا نمی‌توانید کد SVG را تغییر دهید، در نهایت با یک SVG کار می‌کنید که قبلاً دارای ویژگی‌های ارائه اعمال شده است (مگر اینکه هنگام صادرات به فرمت SVG به صراحت آن را غیرفعال کنید) و مقادیر این صفات بر صفات به ارث رسیده ارجحیت دارد .

و حتی اگر بتوانید کد SVG را ویرایش کنید و بتوانید از شر آنها خلاص شوید، اکیدا توصیه می کنم این کار را نکنید دلایل زیر:

1. حذف ویژگی‌ها به منظور تنظیم متعاقباً ویژگی‌های خاص، مقادیر این ویژگی‌ها را به حالت پیش‌فرض بازنشانی می‌کند و این معمولاً یک پر کردن و ضربه سیاه (در رابطه با رنگ‌ها) است.
2. با بازنشانی مقادیر، خود را مجبور می‌کنید تا به کل مجموعه ویژگی‌ها استایل دهید.
3. ویژگی‌های ارائه، که در ابتدا تنظیم می‌شوند، در صورت بروز مشکل در سبک‌های خارجی، یک بازگشت عالی هستند. اگر CSS بارگیری نشود، نمادهای شما همچنان زیبا به نظر می رسند.

بنابراین ما این ویژگی‌ها را داریم، اما می‌خواهیم نمونه‌های مختلف آیکون‌ها را به گونه‌ای متفاوت استایل کنیم.

این کار با وادار کردن ویژگی های ارائه به ارث بردن سبک های مشخص شده انجام می شود یا یافتن راهی برای نادیده گرفتن این مقادیر. برای این کار باید از تمام قدرت CSS cascading استفاده کنیم.

بیا شروع کنیم با مثال های سادهو به تدریج به سراغ موارد پیچیده بروید.

بازنویسی مقادیر ویژگی های ارائه با استفاده از CSS

ویژگی های ارائه با هر اعلان سبکی لغو می شوند. ما می‌توانیم از این برای اطمینان حاصل کنیم که ویژگی ارائه یک مقدار به ارث رسیده از سبک‌ها را دریافت می‌کند .

این به سادگی به لطف کلید است کلمه CSSارث می برد. نگاهی به مثال بعدی- یک نماد بستنی که با یک طرح کلی ترسیم شده است که می خواهیم رنگ آن را در موارد مختلف تغییر دهیم. این نماد توسط ارین آگنولی از Noun Project ایجاد شده است.

محتوای آیکون بستنی (مسیر) ما در داخل عنصر تعریف شده است ، به این معنی که به طور پیش فرض روی بوم نمایش داده نمی شود.

ما چندین نمونه از یک نماد را با استفاده از آن نمایش می دهیم .

عرض و ارتفاع آیکون ها را با استفاده از CSS تنظیم می کنیم. من از همان ابعاد viewBox استفاده می کنم، اما لازم نیست که آنها یکسان باشند. با این حال، برای جلوگیری از فضای سفید اضافی در SVG، مطمئن شوید که نسبت تصویر را حفظ کرده اید.

نماد (عرض: 100 پیکسل؛ ارتفاع: 125 پیکسل؛ )

با این کد به نتیجه زیر رسیدیم:

توجه داشته باشید که به لطف حاشیه‌های سیاه اضافه شده در اطراف SVG‌های ما، می‌توانید حاشیه‌های هر یک را ببینید، از جمله اولین موردی که محتوا در آن رندر نمی‌شود. به یاد داشته باشید: سند SVG که در آن نماد تعریف کرده اید، در صفحه نمایش داده می شود، اما بدون محتوا. برای جلوگیری از این امر، از ویژگی display: none در اولین SVG استفاده کنید. اگر SVG را با تعاریف نماد پنهان نکنید، حتی اگر اندازه آن را اندازه نگیرید روی صفحه ظاهر می شود - 300 در 150 پیکسل پیش فرض را اشغال می کند (این مقدار پیش فرض برای عناصر جایگزین نشده در CSS است) و در نهایت با یک بلوک خالی روی صفحه مواجه خواهید شد که به آن نیاز ندارید.

حالا بیایید سعی کنیم رنگ پر را برای هر نمونه آیکون تغییر دهیم:

Use.ic-1 (fill: skyblue; ) use.ic-2 (fill: #FDC646;)

رنگ پر کردن نمادها هنوز تغییر نمی کند، زیرا رنگ ارثی توسط ویژگی fill="#000" در عنصر مسیر بازنویسی می شود. برای جلوگیری از این اتفاق، باید مسیر را مجبور کنیم تا رنگ را به ارث ببرد:

مسیر Svg (پر کردن: ارث بردن؛)

وویلا! رنگ ها، به عناصر داده شده است اکنون در مسیر هر یک از آنها اعمال می شود. نسخه ی نمایشی را بررسی کنید و با ایجاد نمونه و دادن مقادیر، آنها را آزمایش کنید رنگهای متفاوت:

حالا این تکنیک بعد از اینکه محتوا را مجبور کردیم کار می کند به ارث بردن سبک ها اما در بسیاری از موارد این دقیقاً آن چیزی نیست که شما نیاز دارید. روش های طراحی دیگری نیز وجود دارد که اکنون به برخی از آنها می پردازیم.

طراحی محتوا با استفاده از ویژگی CSS all

مدتی پیش، در حین کار بر روی یک نماد فعال شده با ، برای به ارث بردن همه استایل ها به یکی از عناصر داخل آن نیاز داشتم مانند پر کردن، سکته مغزی، پهنای ضربه، کدورت و حتی تبدیل. بنابراین من نیاز داشتم که همه این ویژگی‌ها را از طریق CSS کنترل کنم، در حالی که تمام ویژگی‌های ارائه‌ای را در نشانه‌گذاری به‌عنوان بازگشتی نگه می‌داشتم.

اگر با کار مشابهی مواجه شدید، احتمالاً فکر می‌کنید که انجام همه کارها در CSS خیلی طول می‌کشد:

Path#myPath ( fill: inherit; stroke: inherit; stroke-width: inherit; transform: inherit; /* ... */ )

پس از بررسی این قطعه، متوجه یک الگو خواهید شد، به این معنی که منطقی است که تمام ویژگی های مشخص شده را در یک ترکیب کنید و آن را تنظیم کنید. ارزش به ارث بردن.

خوشبختانه به ما کمک خواهد کرد ویژگی CSSهمه. کتاب مرجع CSS من به استفاده از ویژگی all برای استایل SVG اشاره کرده است، اما ارزش تجدید نظر را دارد.

با استفاده از تمام ویژگی می توانیم این کار را انجام دهیم:

Path#myPath (همه: ارث بردن؛ )

این در همه مرورگرهایی که همه را پشتیبانی می کنند خوب کار می کند، اما به موارد زیر توجه داشته باشید: نکته مهم: این اعلان به عنصر می‌گوید که به معنای واقعی کلمه تمام ویژگی‌های والد خود را به ارث ببرد، از جمله آنهایی که نمی‌خواهید عنصر داشته باشد. بنابراین، مگر اینکه بخواهید تمام خصوصیات CSS استایل داده شوند، این برای شما کار نخواهد کرد - این آخرین راه حل است و تنها زمانی مناسب است که یک عنصر بدون استایل داشته باشید و تسلط کاملبالاتر از ویژگی های آن در CSS. اگر از این اعلان استفاده می‌کنید و مقادیری را برای همه ویژگی‌های CSS تعریف نمی‌کنید، آن‌ها تا زمانی که مقداری را برای ارث بردن پیدا کنند، در اکثر موارد سبک‌های پیش‌فرض مرورگر، آبشاری می‌شوند.

توجه داشته باشید که این فقط برای ویژگی هایی اعمال می شود که می توانند با استفاده از CSS تنظیم شوند، نه ویژگی هایی که فقط می توانند در SVG تنظیم شوند. اگر ویژگی را بتوان با استفاده از CSS تنظیم کرد، سبک ها را به ارث می برد، در غیر این صورت نه.

امکان به ارث بردن ویژگی های ارائه برای همه سبک ها ، اما اگر یک نماد متشکل از چندین عنصر دارید و نمی خواهید همه آنها یک رنگ پر را به ارث ببرند چه؟ اگر بخواهید چندتایی را اعمال کنید چه می شود رنگ های متنوعبرای فرزندان مختلف پر می کند؟ مشخص کردن یک سبک در دیگر مناسب نیست ما به چیز دیگری برای آبشار نیاز داریم رنگ های مورد نیازبه عناصر لازم.

استفاده از متغیر CSS currentColor برای استایل دادن به محتوا

استفاده از متغیر CSS CurrentColor در ترکیب با تکنیکی که در بالا توضیح داده شد به شما این امکان را می دهد که به جای یک عنصر، دو رنگ را برای یک عنصر تعریف کنید. فابریس واینبرگ یک سال پیش در این باره نوشت.

ایده این است که به طور همزمان به پر کردن و رنگ کردن خواص و سپس آبشاری آن ویژگی ها به محتوا ، با استفاده از قابلیت های متغیر currentColor. بیایید به چند کد مثال نگاه کنیم تا بفهمیم این چگونه کار می کند.

فرض کنید می‌خواهیم این لوگوی مینیمالیستی Codrops را با استفاده از 2 رنگ طراحی کنیم - یکی برای جلو و دیگری برای پشت.

ابتدا اجازه دهید با کد این تصویر شروع کنیم: نمادی داریم که حاوی توضیحات نماد و سه نمونه است. ، ایجاد سه نسخه از لوگو.

اگر رنگ fill را در عنصر قرار دهیم برای هر نمونه، این رنگ توسط هر دو حباب به ارث می رسد، که هدف ما نیست.

بنابراین به جای تعریف یک رنگ پر و آبشاری آن به روش معمول، از متغیر currentColor استفاده می کنیم تا حباب کوچکتر در پیش زمینه رنگ متفاوتی داشته باشد و این مقدار را با خواص رنگ.

ابتدا باید CurrentColor را در جایی که می‌خواهیم این رنگ را اعمال کنیم وارد کنیم - این جایی در نشانه‌گذاری است که نماد در آن تعریف شده است، یعنی داخل . حالا این قطعه به شکل زیر است:

سپس باید ویژگی fill presentational را از قطره دوم حذف کنیم و اجازه دهیم رنگ fill را از عنصر به ارث ببرد با استفاده از ارث .

اگر بخواهیم از کلمه کلیدی inherit برای وادار کردن ویژگی های ارائه به ارث بردن مقادیر از آن استفاده کنیم ، هر دو بخش ارث می برند همان مقدار، و currentColor هیچ تاثیری نخواهد داشت. بنابراین، در این تکنیک، باید صفتی را که می‌خواهیم از طریق CSS تنظیم کنیم، حذف کرده و تنها ویژگی را که در آن از currentColor استفاده می‌کنیم، باقی بگذاریم.

اکنون با استفاده از ویژگی های fill و color در ما سبک هایی را به حذف از لوگو اضافه می کنیم:

Codrops-1 (پر: #4BC0A5؛ رنگ: #A4DFD1؛ ) .codrops-2 (پر: #0099CC؛ رنگ: #7FCBE5; ) .codrops-3 (پر: #5F5EC0؛ رنگ: #AEAFDD؛ )

هر عنصر دریافت می کند مقدار خاصپر و رنگ . در هر کدام، رنگ fill برای پر کردن مسیر اول که ویژگی fill ندارد، آبشاری می‌شود و از رنگ ویژگی رنگ برای تنظیم ویژگی fill در مسیر دوم استفاده می‌شود.

بنابراین آنچه اتفاق افتاد این بود که مقدار رنگ فعلی به سبک محتوای عنصر نشت کرد با استفاده از متغیر currentColor برازنده، اینطور نیست؟

در اینجا یک نسخه آزمایشی با کد استفاده شده است:

این تکنیک دو رنگ برای لوگوهای دو رنگ عالی است. فابریس در مقاله خود سه نسخه مختلف از لوگوی Sass ایجاد کرد و رنگ متن را نسبت به پس زمینه تغییر داد.

کلمه کلیدی currentColor تنها متغیر CSS موجود در حال حاضر است. با این حال، اگر متغیرهای بیشتری داشتیم، آیا می‌توانیم از آنها برای پر کردن بیشتر استفاده کنیم بیشترارزش ها در محتوا ? بله، ما می توانستیم. آملیا بلامی رویدز یک سال پیش این مفهوم را در وبلاگ Codepen خود معرفی کرد. بیایید ببینیم چگونه کار می کند.

آینده: طراحی محتوا با استفاده از متغیرهای CSS

کد ربات شامل تمام رنگ هایی است که آن را تشکیل می دهند:

اکنون، ما از متغیرهای CSS به عنوان مقادیر مشخصه پر برای هر طرح استفاده نخواهیم کرد. در عوض، ما از آنها به عنوان رنگ های پر با استفاده از ویژگی CSS fill استفاده می کنیم و تمام ویژگی های fill را در جای خود نگه می داریم. این ویژگی ها به عنوان یک بازگشت برای مرورگرهایی که از متغیرهای CSS پشتیبانی نمی کنند استفاده می شود - اگر متغیرهای CSS کار نمی کنند، تصویر به شکلی ظاهر می شود.

با اضافه شده کد متغیربه شرح زیر خواهد بود:

از آنجایی که تگ های سبک درون خطی ویژگی های ارائه را لغو می کنند، مرورگرهایی که از متغیرهای CSS پشتیبانی می کنند از این متغیرها برای تنظیم رنگ پر استفاده می کنند. مرورگرهایی که از آنها پشتیبانی نمی کنند از ویژگی fill استفاده می کنند.

در مرحله بعد باید مقادیر متغیرها را در CSS تنظیم کنیم. اما ابتدا تصویر را با استفاده از آن نمونه سازی می کنیم :

پس از آن، مقادیر متغیرها را برای استفاده تنظیم می کنیم تا بتوانند به محتوای آن آبشاری کنند. رنگ هایی که انتخاب می کنید ایجاد خواهند کرد طرح رنگیطراحی از آنجایی که ربات ما از سه رنگ اصلی استفاده می کند، آنها را اولیه، ثانویه و سوم می نامیم.

#robot-1 (-رنگ اصلی: #0099CC؛ -رنگ ​​ثانویه: #FFDF34؛ -رنگ ​​سوم: #333؛ )

هنوز هم می‌توانید از ویژگی‌های پر و رنگ در ارتباط با این متغیرها استفاده کنید، اما می‌توانید به خوبی از پس آن برآیید. بنابراین، با رنگ های مشخص شده در متغیرهای ما، ربات به شکل زیر است:

می توانید به تعداد دلخواه از یک تصویر استفاده کنید و مجموعه ای از رنگ های مختلف را برای هر یک از آنها تنظیم کنید و ایجاد کنید موضوعات مختلف. این تا حدی زمانی مفید است که می خواهید یک لوگو طراحی کنید راه های مختلفبسته به زمینه و در موارد مشابه دیگر.

همانطور که گفته شد، مرورگرهایی که از متغیرهای CSS پشتیبانی نمی کنند، از ویژگی های ارائه مشخص شده به عنوان یک بازگشت استفاده می کنند، در حالی که مرورگرهایی که از متغیرهای CSS پشتیبانی می کنند. متغیرهای CSSاز آنها برای پر کردن ویژگی fill و بازنویسی ویژگی ها استفاده کنید. اما چه اتفاقی می‌افتد اگر مرورگر از متغیرهای CSS پشتیبانی کند، اما فراموش کرده باشید که این متغیرها را در سبک تنظیم کنید یا مقدار اشتباهی را تنظیم کنید؟

برای ربات هیپستر خود، ما سه متغیر را تنظیم کردیم و فقط تعداد کمی از قطعات آن به آنها وابسته نیستند - از این گذشته، این ربات در ابتدا برای قالب بندی احتمالی توسعه یافته بود. بنابراین اگر این کد را در مرورگری اجرا کنید که از متغیرهای CSS پشتیبانی می‌کند و تمام اعلان‌هایی که آن متغیرها را اعلام می‌کنند حذف کنید، نتیجه زیر را دریافت خواهید کرد:

اگر مقادیر متغیر تنظیم نشده باشند یا درست نباشند، مرورگر از رنگ پیش‌فرض خود استفاده می‌کند که معمولاً برای پر کردن و استروک در SVG سیاه است.

یک راه حل برای این کار این است که یک رنگ متفاوت را به عنوان جایگزین برای پشتیبانی از مرورگرها تنظیم کنید. سینتکس متغیر CSS به شما این امکان را می دهد: به جای ارسال نام متغیر به عنوان آرگومان به var()، دو آرگومان را که با کاما از هم جدا شده اند ارسال می کنید - نام متغیر و یک بازگشت، در این مورد مقدار مشخصه ارائه.

بنابراین اکنون کد ربات ما به شکل زیر است:

و این همه است. اگر متغیری مجموعه ای از مقدار نداشته باشد، مرورگر همیشه یک مجموعه رنگ به عنوان بازگشتی خواهد داشت. حیرت آور.

با استفاده از این تکنیک می توانید این ربات را در هر نقطه از صفحه با استفاده از آن نمایش دهید ، تنظیم رنگ های مختلف برای هر نمونه و متفاوت شدن تم های رنگیدر نهایت.

می‌توانید نسخه‌ی نمایشی را آزمایش کنید، هر تعداد کپی از ربات را که دوست دارید ایجاد کنید و آن را با هر رنگی رنگ کنید - فقط به یاد داشته باشید که برای انجام این کار باید از مرورگری استفاده کنید که از متغیرهای CSS پشتیبانی می‌کند:

اگر این نسخه آزمایشی را در مرورگری مشاهده کنید که از متغیرهای CSS پشتیبانی می کند، یک نسخه آبی و زرد از ربات را در میان سایر موارد مشاهده خواهید کرد، درست مانند آنچه در متغیرهای CSS تنظیم کردیم. در غیر این صورت، سه ربات یکسان با رنگ بازگشتی خواهید دید.

جمع بندی

این یک مقاله خوب بود.

با استفاده از قدرت آبشار CSS، یک ظاهر طراحی محتوا ذخیره شده در سایه DOM پیچیده تر می شود. و با متغیرهای CSS (currentColor یا ویژگی‌های سفارشی) می‌توانیم به DOM سایه دسترسی پیدا کنیم و گرافیک‌های خود را هر طور که می‌خواهیم سفارشی کنیم، در حالی که در صورت بروز مشکل، یک بازگشت ایجاد می‌کنیم.

من شخصاً ترکیب متغیرهای CSS و SVG را بسیار دوست دارم. من عملکرد ترکیبی آنها را دوست دارم، به خصوص از نظر ایجاد یک مکانیسم بازگشتی.

همچنین ممکن است راه‌های دیگری برای استایل دادن به محتوا دریافت کنیم. در آینده، با ادامه بحث در مورد استفاده از متغیرهای CSS به عنوان پارامترهای SVG - بنابراین این مقاله همه چیزهایی را که در مورد این موضوع باید یاد گرفت را پوشش نمی دهد.

کار با محتوای SVG قابل استفاده مجدد یکی از بخش های پیچیده SVG است که به رفتار و مکان کد در حال شبیه سازی مربوط می شود. مسائل مرتبط زیادی در اینجا مطرح می شود که می تواند به موضوع مقاله های جداگانه تبدیل شود.

پشتیبانی از گرافیک برداری مقیاس پذیر (SVG) در همه موارد عالی عمل می کند مرورگرهای مدرن، فرمت تصویر در زمینه های شگفت انگیز در بسیاری از صفحات وب مختلف ظاهر می شود. اما علیرغم استاندارد بودن برای نزدیک به دو دهه، SVG یک فرمت تا حدی جدید برای برخی از طراحان و توسعه دهندگان باقی مانده است و آنها را در مورد نحوه استفاده از آن در یک سایت سردرگم می کند. در اینجا چند دلیل وجود دارد که چرا باید از SVG استفاده کنید:

اندازه فایل کوچک

به خوبی طراحی شده است، یک SVG معمولی بسیار کوچکتر از PNG معادل است، به این معنی که صفحاتی که از آنها استفاده می کنند سریعتر برای کاربران بارگذاری می شوند.

مقیاس پذیری

زیرا SVG از فرمول های ریاضی به جای پیکسل های ثابت ساخته شده است گرافیک شطرنجیتصاویر SVG را می توان بدون از دست دادن کیفیت، کم و زیاد کرد و برای وب سایت های مدرن و واکنش گرا ایده آل است.

با DOM تعامل دارد

SVG گاهی اوقات به عنوان "نقاشی نشانه گذاری" شناخته می شود: هر عنصر در یک تصویر SVG با DOM تعامل دارد، به این معنی که CSS و جاوا اسکریپت می توانند بخش هایی از سند SVG را دستکاری کنند. برخلاف گرافیک شطرنجی، هر شکل فردی در SVG می‌تواند شناسه یا کلاس خاص خود را داشته باشد.

آسان برای تغییر و انطباق

کیفیت اجزای SVG به این معنی است که اسناد SVG به خوبی شکل گرفته را می توان به راحتی در هر ویرایشگر متنی بدون نیاز به اصلاح کرد. برنامه های تخصصی، برای تصاویر شطرنجی مورد نیاز است. و چون SVG با DOM تعامل دارد، عناصر آن را می توان با استفاده از CSS تغییر داد. فرمت SVG برای نمایش عالی است:

آرم ها

• تصاویر و نقاشی ها

ابزار کار با SVG

اگرچه می توانید یک سند SVG با استفاده از هر یک ایجاد کنید ویرایشگر متن، برنامه های تصویر برداری برداری مانند Adobe Illustrator یا Inkscape معمولاً هستند بهترین انتخاب(البته لازم به ذکر است که سایر برنامه ها از جمله برنامه های سه بعدی مانند Blender و برنامه های کاربردی سرور، می تواند SVG صادر کند).

مهم نیست که از چه چیزی استفاده می کنید، باید توجه داشته باشید که ایجاد SVG از برنامه ها هنوز هم گاهی اوقات چیزهای زیادی را برای دلخواه باقی می گذارد: سند حاصل اغلب بیش از حد کدگذاری شده و گاهی اوقات فرمت ضعیفی دارد. فایل .svg را می توان با پردازش آن با استفاده از یک بهینه ساز مانند SVGOMG کوچکتر و فشرده تر کرد. گاهی اوقات عبور اشتباه document.svg از اعتبارسنجی W3C می تواند به شما در شناسایی مشکلات کمک کند.

ادغام SVG

سه راه اصلی برای استفاده مستقیم از SVG در یک صفحه وب وجود دارد:

از آنجایی که SVG مبتنی بر XML است، می توان آن را مستقیماً در کد صفحه شما ادغام کرد. کد SVG تاخیر و زمان بارگذاری کلی صفحه شما را کاهش می دهد.


پسندیدن تصاویر شطرنجی، فایل SVG را می توان با برچسب ارجاع داد یا از طریق CSS به عنوان تصویر پس زمینه. این اغلب است بهترین راهمگر اینکه SVGها به توجه جداگانه به CSS و جاوا اسکریپت نیاز داشته باشند.


به عنوان درج شده است