В общем есть прямоугольник с контуром, прозрачным фоном и текстом внутри.
Выглядит он вот так:
<svg width="130" height="40">
<linearGradient id="logo_gradient" gradientTransform="rotate(45)">
<stop offset="0" stop-color="#f4523d"></stop>
<stop offset="100%" stop-color="#438fcb"></stop>
</linearGradient>
<rect x="2" y="2" width="126" height="36" fill="transparent" stroke="url(#logo_gradient)" stroke-width="2" />
<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" dy=".3em" stroke="#000" stroke-width="0">Текст</text>
</svg>
- Как добавить градиент к текст
- Как сделать плавный "перелив" градиента при наведение (допустим с
45deg
на135deg
)
2.1. Какие способы есть для эффекта при наведение (css
илиjq
, например)
CSS
&JS