SVG Pattern چیست و چطور از آن استفاده کنیم

زمان لازم برای مطالعه: 6 دقیقه

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

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

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

پیش نیازلازم که باید داشته باشید

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

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

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

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

<svg>
    <defs>
          <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse">
              <circle cx="20" cy="20" r="20” fill= "#64bee3" />
          </pattern>
    </defs>
    <rect x="10" y="10" width="200" height="200"
    stroke= "#333333" stroke-width="2" fill="url(#basicPattern)" />
</svg>

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

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

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

fill=”url(#basicPattern)”

ویژگی‎ها (Attributes)

درحالی‌که تعداد زیادی از ویژگی‌های خاص 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 تعیین می‌شود.

patternUnit ها

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

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

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

patternContentUnit ها

مقادیر 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>
    <defs>
          <pattern id="boundingPattern" width=".50" height=".50" patternContentUnits="objectBoundingBox">
              <circle cx=".250" cy=".250” r=".1" fill="#ec7677" />
          </pattern>
    </defs>
    <rect x="2" y="2" width="200" height="200" stroke="#333333" stroke-width="2" fill="url(#boundingPattern)" />
</svg>

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

یک نکته در خصوص اندازه ها

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

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

یک مثال دیگر

حال که درک قوی‌تری از گزینه‌های ویژگی 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>
    <defs>
          <pattern id="yellowPattern"
            x="5" y="5" width="75" height="75"
            patternUnits="userSpaceOnUse">
                <circle cx="22" cy="22" r="14"
                stroke="#f19450" stroke-width="2" fill="#f6bf35" />
          </pattern>
          <pattern id="greenPattern"
            x="10" y="10" width="50" height="50"
            patternUnits="userSpaceOnUse">
                <rect x="2" y="2" width="30" height="30"
                stroke="#5cbc8f" stroke-width="2" fill="url(#yellowPattern)" />
          </pattern>
    </defs>
    <rect x="2" y="2" width="200" height="200"
    stroke="#333333" stroke-width="2" fill="url(#greenPattern)" />
</svg>

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

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

<svg>
    <defs>
          <pattern id="pathPattern" x="4" y="4" width="25" height="25" patternUnits="userSpaceOnUse">
                <path d="M 0 0 Q 5 20 10 10 T 20 20" stroke="#f0934e" fill="none" />
          </pattern>
    </defs>
    <rect x="2" y="2" width="200" height="200"
    stroke= "#333333" stroke-width="2px" fill="url(#pathPattern)" />
</svg>

 

پر کردن متن

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

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

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

جمع بندی و نتیجه گیری

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

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

برگرفته از سایت desingmodo.com