چگونه از الگو های SVG استفاده کنیم؟

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

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

در این مقاله در مورد گزینه‌های نحوی و ویژگی‌های اساسی برای الگوهای SVG بحث خواهیم کرد و سپس بعضی از نمونه‌ها را برای درک بیشتر مرور می‌کنیم.

پیشینه علمی

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

الگوها را پر کنید

بیایید نگاهی به ساختار دستوری یک الگوی SVG اولیه بیندازیم و سپس از گزینه‌های ویژگی خاص هم استفاده کنیم.

این کد الگوی زیر در یک مستطیل را ارائه می‌دهد:

طراحی SVG

<svg> حاوی عنصر <defs> است که به ما امکان می‌دهد تعریف‌ها را برای استفاده مجدد، نام‌گذاری کنیم. این تعاریف  تا زمانی که با استفاده از شناسهٔ منحصربه‌فرد خود با stroke و / یا ویژگی‌های fill مورداشاره واقع شوند، خروجی بصری ندارند.

 


مستطیل در داخل <svg> قرار دارد، اما در خارج از عنصر  است <defs> که در آن الگوی ما تعریف‌شده است.  الگو سپس به مستطیل از طریق ویژگی “fill” اعمال می‌شود:fill="url(#basicPattern)”

ویژگی‌ها

درحالی‌که تعداد زیادی از ویژگی‌های خاص SVG وجود دارد، مطالعه این مقاله برای تولید و دست‌کاری الگوهای اساسی SVG ضروری است.

شاید مفاهیم مهم و چالش‌برانگیز در مورد الگوهای SVG، مختصاتی برای هر جزئی از الگو باشند که طرح‌ریزی‌شده است، بنابراین این ویژگی‌ها به‌طور خاص در توصیف‌های زیر موردتوجه قرار می‌گیرند.

ID

هر الگو نیاز به یک شناسه منحصربه‌فرد به‌منظور ارجاع از طریق stroke و / یا ویژگی‌های fill از اشکال SVG و یا متن دارد.

x، y، عرض، ارتفاع

خصیصه x و y در عنصر <pattern> تعریف می‌کند که چگونه الگوی شکل، شروع خواهد شد. عرض و ارتفاع مورد استفاده در عنصر <pattern>، عرض و ارتفاع واقعی فضای الگوی اختصاص داده‌شده را تعیین می‌کنند.

به‌عنوان‌مثال، عنصر <pattern> که در بالا ذکرشده است، دارای مقادیر زیر است:

x=”١٠″ y=”١٠″ width=”۴٠″ height=”۴٠”

الگو از ۱۰px در محور x ها آغاز خواهد شد، ۱۰px هم در ابتدای محور y، و اساساً ” canvas “(بوم) ۴۰ پیکسل عرض و ۴۰ پیکسل ارتفاع ایجاد می‌شود.

تعیین این مقادیر سیستم مختصات، توسط مقادیر اعمال‌شده درون صفات PatternUnits و PatternContentUnits تعیین می‌شود.

patternUnits

ویژگی patternUnits مختصات را برای هر,x, y width و height اشاره‌شده تعریف می‌کند. دو گزینه userSpaceOnUse و objectBoundingBox در اینجا است.

آنچه درزمینهٔ استفاده از الگوها مورداستفاده قرار می‌گیرد، ارزش نتایج userSpaceOnUse است که در یک الگوی سیستم به دست می‌آید. این نتایج توسط سیستم مختصات، برای ارجاع عنصر <pattern> (مانند مستطیل در مثال بالا) و stroke و/یا fill تعیین‌شده‌اند.
مقدار objectBoundingBox x، y، عرض و ارتفاع سیستم مختصات نقشه‌برداری را به‌عنوان objectBoundingBox از عنصری که از الگوی آن استفاده می‌شود (هدف الگو)، مستقر می‌کند.

اگر مقدار مشخص نشده باشد، مقدار پیش‌فرض آن objectBoundingBox است.

patternContentUnits

مقادیر attribute patternsContentUnits همانند مقادیر patternUnits، objectBoundingBox و userSpaceOnUse هستند، به‌جز اینکه سیستم مختصات برای محتویات الگو تعریف‌شده است.

برخلاف patternUnits، اگر این مقدار نامشخص باقی بماند، به‌صورت پیش‌فرض به “userSpaceOnUse” تعلق دارد. این بدین معنی است که مگر اینکه یک یا هر دو از این مشخصه‌ها مشخص شوند، در آن صورت اشکال کشیده شده در <pattern> در یک سیستم مختصات مختلف، از عنصر <pattern> خود استفاده می‌کنند.

رویکردی برای ساختن این مشکل کوچک، الگویی برای defineUnits = “userSpaceOnUse” در عنصر<pattern> است. به‌طور پیش‌فرض patternContentUnits به userSpaceOnUse تنظیم خواهد شد و اطمینان حاصل می‌شود که آن‌ها هم‌اکنون در یک فضای هماهنگ کار می‌کنند، که ما در بخش بعدی در مورد آن بحث خواهیم کرد.

همچنین لازم به ذکر است اگر شما قبلاً مشخصه مختصات viewBox را در عنصر <pattern> مشخص کرده‌اید، این مقدار تأثیری نخواهد داشت.

نگاهی دقیق‌تر به واحدهای الگو

واحدهای الگو جنبه مهم و پیچیده‌ای از الگوهای SVG هستند. همان‌طور که ذکر شد، patternUnits و patternContentUnits به‌طور پیش‌فرض دارای مقادیر متفاوت هستند و چون، یک یا هرکدام از آن‌ها برای هماهنگ کردن با یکدیگر برای یک منطقه الگو منطبق باشند، مهم هستند..

تنظیم patternUnits = “userSpaceOnUse” اطمینان حاصل خواهد کرد که آن را در سیستم مختصات مشابه به‌عنوان PatternContentUnits کار می‌کند و گزینه بسیار ساده‌تری است. اگر ما اندازه شکل /متن هدف را در این سیستم مختصات تغییر دادیم، الگوی برای پر کردن فضای اضافی، تکرار خواهد شد.

تنظیم patternContentUnits = “objectBoundingBox” همچنین فضای هماهنگ سازگار را تضمین می‌کند. اگر ما اندازه شکل/ متن هدف را در این سیستم مختصات تغییر دادیم، الگو برای پر کردن فضای اضافی، بدون تکرار، تنظیم می‌شود. به‌منظور اطمینان از مقادیر مقیاسی مناسب در این سیستم، باید مجموعه مبتنی بر اعداد صدتایی یا ده‌دهی تعیین‌شده باشد.

کار در یک سیستم objectBoundingBox می‌تواند دشوار باشد. به نظر می‌رسد در هنگام کار در این فضای تعدادی از اشکالات وجود دارد، و ایده مقیاس به‌طورکلی، واقعاً برای مفهوم الگوی تکراری، درست نیست.

به‌عنوان مرجع، برای یک الگوی اولیه که در فضای مختصات objectBoundingBox قرار دارد، یک نگاه به‌جزئیات می‌اندازیم:

ساخت SVG

اگر ما عرض و ارتفاع شکل هدف را با اشاره به الگو گسترش دادیم، حلقه‌ها به‌طور مناسب اندازه می‌شوند؛ همیشه تنها چهار دایره درون مستطیل وجود دارد.

یک نکته در اندازه‌گیری

به نظر می‌رسد مقادیر زیادی از عرض و ارتفاع SVG وجود دارد که بسیار سریع می‌توانند الگو و شکل‌هایی که در ساخت SVG  استفاده می‌شوند را تحت تأثیر قرار گیرند.
عرض و ارتفاع درون عنصر <pattern> تعیین می‌کند که چقدر الگو، باید قبل از شروع تکرار داشته باشد. این مقادیر اساساً اندازه بوم منطقه الگو را تعیین می‌کنند.

عرض و ارتفاع درون شکل الگو را، اندازه آن‌ها را تعیین می‌کند، اما اندازه نمی‌تواند بیش از عرض و ارتفاع تنظیم‌شده در عنصر <pattern> باشد.  هر شکل، بیشتر از حد تعیین‌شده توسط <pattern>، ارائه نمی‌شود.

مثال

حال که درک قوی‌تری از گزینه‌های ویژگی SVG را داریم، نگاهی دقیق به مثال دیگری می‌اندازیم که بیشتر از این گزینه‌های استفاده می‌کند:

الگوی SVG

ابعاد

شکل SVG ما ۲۰۰ پیکسل در ۲۰۰ پیکسل است، الگو ما “canvas” ٢٠ پیکسل در ۲۰ پیکسل است و الگوی شکل خودمان ۱۰ پیکسل در ۱۰ پیکسل است. این اجازه می‌دهد تا برای ۱۰ واحد (۲۰ پیکسل در ۲۰ پیکسل) برای تنظیم از شکل (۲۰۰ پیکسل در ۲۰۰ پیکسل) استفاده کنیم.
در هر واحد الگو یک مستطیل (۱۰ پیکسل در ۱۰ پیکسل) با مقدار x و y ۵px وجود دارد. این به این معنی است که در طرف بالا و چپ هر مستطیل، از دو طرف مرز <pattern> وجود دارد.

خود شکل SVG و الگوی با ۲ پیکسل از چپ و ۲ پیکسل از بالا شروع می‌شود. تا اطمینان حاصل شود که خارج از مرز شکل پنهان نباشد.

تغییر ارزش x و y

اگر این الگو مستطیل را به‌اندازه الگوی “canvas” (٢٠px by ٢٠px) تنظیم کنیم و مقادیر x و y را به “۰” تغییر دهیم، شکل SVG بارنگ بنفش پر می‌شود.. با اضافه کردن مقادیر x و y بزرگ‌تر از ۰ برای شکل در داخل الگو، شکل در امتداد محور مناسب قرار می‌گیرد، هرگونه قسمت اضافی به‌سادگی قابل‌مشاهده نیست.

حتی اگر width و height یکسان باشند، با توجه به مقادیر استفاده‌شده، یک مقدار بزرگ‌تر x و y در مستطیل، می‌تواند باعث شود که مستطیل کوچک‌تر به نظر برسد، این بدین دلیل است که شکل فراتر از مرزهای تعیین‌شده با عنصر <pattern> حرکت می‌کند و عرض و ارتفاع را در <pattern> گسترش می‌دهد و قسمت‌هایی از شکل که مشخص نیستند هم، نشان می‌دهد.

الگوی زیر همانی است که در مستطیل بالا است، به‌جز اینکه با مقادیر مختلف x و y در شکل الگوی بنفش وجود داشت: x = “١۵” y = “١۵”.

ساخت الگوی SVG

به نظر می‌رسد که مثلث مستطیلی کوچک‌تر شده است، اما ما آن را به سمت پایین و بیش از ۱۰ پیکسل اضافی حرکت دادیم، و بخش کوچکی از آن را روی بوم الگو قراردادیم.

الگوی تودرتو

همچنین می‌توان یک الگو را با الگو دیگری پر کرد.

الگو های تودرتو SVGمسیرها به‌عنوان الگو

مسیرها را می‌توان به‌عنوان الگوها نیز استفاده کرد.

مسیر الگو SVGپر کردن متن

پر کردن <text> با یک الگو، بسیار شبیه به پر کردن یک‌شکل دارد.

الگوی متن

پشتیبانی مرورگر

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

نتیجه‌گیری

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

امیدوارم یک ساختار پایه‌ای از چگونگی کار این الگوها، شما را تشویق کند تا قابلیت‌های خود را با توجه به محدودیت‌ها، با اشکال و مسیرهای پیچیده تست کنید.

مطالعه بیشتر
توضیح اصطلاحات مهم در سرچ کنسول گوگل
به این مطلب امتیاز دهید.
نمایش بیشتر

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

15 − = 10

بستن
بستن