بیایید نگاهی به چگونگی ترکیب ویژگی border-image در CSS با SVG های متحرک که در اطراف یک مرز حرکت می کنند ، بیاندازیم. در این مراحل ، ما نحوه ساخت دستی SVG متحرک با 9 قطعه قابل تغییر با دست را توضیح خواهیم داد که می توانید نه تنها جلوه را دوباره ایجاد کنید بلکه برای ساختن اثر خود استفاده کنید.

این چیزی است که ما می سازیم:

آیا باید از background یا border-image استفاده کنیم؟

در ابتدا ، من حتی نمی دانستم که border-image یک چیز است. من در اولین تلاش خود از یک شبه عنصر::before استفاده کردم و ویژگی background-position آن را متحرک کردم. این مرا تا اینجا رساند:

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

 برای حاشیه عنصر از یک تصویر (یا شیب CSS) استفاده کنید.

برای کار با border-image، باید تصویری را ارائه دهید که به صورت نه تکه استفاده شود (به صفحه تخته و انگشتی روی تصویر فکر کنید). هر یک از این نه منطقه نمایانگر قسمت متفاوتی از مرز است: بالا ، راست ، چپ و پایین ، هر چهار گوشه و سپس وسط (که نادیده گرفته می شود).

به عنوان مثال ، اگر فقط جمجمه های ساکن می خواستیم ، می توانیم با استفاده از الگوهای SVG ، جمجمه را نه بار تکرار کنیم. ابتدا با استفاده از مسیر جمجمه یک الگوی 24 × 24 تعریف می کنیم و سپس از این الگو به عنوان پر کننده یک مستطیل 72 72 72 استفاده می کنیم:

<svg version="1.1" height="72" width="72" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <pattern id="skull-fill" width="24" height="24" 
patternUnits="userSpaceOnUse">
    <path d="..." fill="red"/>
  </pattern>
 </defs>
 <rect fill="url(#skull-fill)" width="72" height="72" />
</svg>

بعد ، یک حاشیه تعریف می کنیم و border-image را روی عنصر هدف تنظیم می کنیم:

.skulls {
  border: 24px solid transparent;
  border-image: url("https://skullctf.com/images/skull-9.svg") 24 round;
}

و یک مرز ساخته شده از جمجمه می گیریم:

اضافه کردن انیمیشن های SVG

حالا ما می توانیم آن جمجمه ها را متحرک کنیم! این کار ، اکثر اوقات ،

ایجاد انیمیشن متفاوت برای هر منطقه در   border- imageاست. به عنوان مثال ، در گوشه بالا سمت چپ ، یک جمجمه داریم که از راست به چپ می رود ، در حالی که جمجمه دوم همزمان از بالا به پایین می رود.

ما ویژگی transform را برای حرکت بصورت انیمیشن خواهیم کرد. ما همچنین از SVG’s <use> برای جلوگیری از تکرار تعریف طولانی <path> برای هر جمجمه استفاده خواهیم کرد:

<svg version="1.1" height="96" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <style>
  @keyframes left {to {transform: translate(-32px, 0)}}
  @keyframes down {to {transform: translate(0, 32px)}}
 </style>
 <defs>
  <path id="skull" d="..." fill="red"/>
 </defs>

 <!-- Top-left corner: one skull goes left, another goes down -->
 <use href="#skull" x="0" y="0"  style="animation: down .4s infinite linear"/>
 <use href="#skull" x="32" y="0" style="animation: left .4s infinite linear"/>
</svg>

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

این چیزی است که ما بدست می آوریم:

و اگر یک شبکه اضافه کنیم ، می بینیم که چگونه این انیمیشن برخی از لبه های بالا و چپ را نیز پوشش می دهد:

بعد از اضافه کردن سه لبه باقیمانده ، چشمگیرتر به نظر می رسد ، بنابراین تمام هشت منطقه  border- imageرا به طور کامل پوشش می دهد:

<svg version="1.1" height="96" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <style>
  @keyframes left {to {transform: translate(-32px, 0)}}
  @keyframes down {to {transform: translate(0, 32px)}}
  @keyframes right {to {transform: translate(32px, 0)}}
  @keyframes up {to {transform: translate(0, -32px)}}
 </style>
 <defs>
  <path id="skull" d="..." fill="red"/>
 </defs>

 <!-- Top-left corner: one skull goes left, another goes down -->
 <use href="#skull" x="0" y="0"  style="animation: down .4s infinite linear"/>
 <use href="#skull" x="32" y="0" style="animation: left .4s infinite linear"/>

 <!-- Top-right corner: one skull goes up, another goes left -->
 <use href="#skull" x="64" y="0" style="animation: left .4s infinite linear"/>
 <use href="#skull" x="64" y="32" style="animation: up .4s infinite linear"/>

 <!-- Bottom-left corner: one skull goes down, another goes right -->
 <use href="#skull" x="0" y="32" style="animation: down .4s infinite linear"/>
 <use href="#skull" x="0" y="64" style="animation: right .4s infinite linear"/>

 <!-- Bottom-right corner: one skull goes right, another goes up -->
 <use href="#skull" x="32" y="64" style="animation: right .4s infinite linear"/>
 <use href="#skull" x="64" y="64" style="animation: up .4s infinite linear"/>
</svg>

با قرار دادن همه چیز ، ما از SVG متحرک که به تازگی به عنوان border-image ایجاد کرده ایم استفاده می کنیم و نتیجه دلخواه را می گیریم:

من می توانم تمام روز با این بازی کنم ...

برای مبتدیان ، سعی کردم ببینم اگر عملکرد زمان بندی انیمیشن را به ease تغییر دهم ، به چه شکلی در می آید:

همچنین می توانیم جمجمه ها را بین قرمز و سبز کم رنگ کنیم:

حتی وقتی جمجمه ها دور میز بالا می روند می توانیم  جهت آنرا تغییر دهیم:

به تب جاوا اسکریپت بروید و در آنجا می توانید منبع SVG را دستکاری کنید و خودتان امتحان کنید.

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

به اندازه کافی خنده دار ، اگر SVG را با همان انیمیشن به GIF تغییر دادم ، کاملا خوب کار کرد. اما سپس لبه ها متحرک در Chrome متوقف می شوند!

در هر صورت ، به نظر می رسد یک اشکال مرورگر است ، زیرا اگر ویژگی  border-image-repeat را برای گسترش تغییر دهیم ، Firefox لبه ها را متحرک می کند ، اما نتیجه کمی دمدمی مزاج است (هرچند احتمالاً می تواند با موضوع صفحه متناسب باشد)

به نظر می رسد تغییر مقدار border-image-repeat به space نیز درست کار است ، اما فقط در صورتی که عرض عنصر یک مضربی از اندازه کل جمجمه نباشد ، به این معنی که در انیمیشن شکاف هایی داریم.