Анимированная рамка с градиентом с помощью SVG

В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это не так просто. Пробовл сделать с помощью SVG, но не получилось. А недавно я посетил конференцию KharvivCSS и на первом же докладе Lea Verou рассказала, как правильно использовать SVG в CSS.

То, что мне нужно было сделать (без использования SVG, на чистом CSS задать рамке градиент нельзя):

Bordered

Самую простую svg можно использовать и в CSS.

<svg>
  <rect width="100%" height="100%" style="stroke: black; stroke-width: 4px; fill: none;"  />
</svg>

Но для использования SVG в CSS нужно учесть ряд моментов:

• Вы можете встроить SVG в свой CSS с URI данными, и вам не нужно декодировать символы.
• Вы можете иметь многострочный URI данных, экранируя каждую строку с помощью \.
• Вы можете использовать эти данные URI для создания изображений из символов.
• Вы даже можете создавать анимированные фоны с помощью CSS-анимации внутри встроенного SVG.
• Отсутствие viewBox или размеров позволяет фону SVG занимать весь элемент.
• stroke-dasharray позволяет создавать кастомные пунктирные рамки.
• stroke-dashoffset позволяет перемещать их и является анимируемым.
• SVG поддерживает градиентные штрихи, хотя и с громоздким синтаксисом.
• Вы можете применить их к элементам HTML через URI данные!
• Вы должны экранировать # как %23 при указании цвета, потому что это зарезервированный символ в URL.

Пример кода для анимированной рамки с градиентом с помощью SVG

Простой HTML код:

<h3 class="bordered bordered-animated">Bordered</h3>

Основная часть правил CSS для создания анимированной рамки вокруг текста (на самом деле рамка создается с помощью свойства background и SVG):

.bordered{
  padding: .4em .8em;
  background: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <style>\
        @keyframes dashes {\
          to {stroke-dasharray: 50 10}\
        }\
        @keyframes marching-ants {\
          to { stroke-dashoffset: -60px; }\
        }\
      </style>\
      <linearGradient id="g" gradientTransform="rotate(45)">\
        <stop stop-color="gold" />\
        <stop stop-color="%230ac" offset="1" />\
      </linearGradient>\
      <rect width="100%" height="100%" \
      stroke="url(%23g)" stroke-width="10" stroke-dasharray="200 0" fill="none"\
      style="animation: dashes 3s 2s forwards, marching-ants 1s 2.1s linear infinite;" \
      />\
    </svg>');
}

Рабочий пример анимированной рамки вокруг текста с градиентом с использованием SVG

Bordered