Прошу Ваших советов в реализации данной задачи.
Я реализовал анимацию с помощью svg, но тут-то и возникла проблема с шириной строк.
svg {
width: 315px;
height: 44px;
top: 0;
left: 0;
fill: none;
stroke: black;
stroke-width: 1;
overflow: visible
}
.btn_wrap {
display: block;
width: 315px;
border: 1px solid black;
color: red;
padding: 12px 20px;
margin-top: 50px;
}
.animated-line {
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Каталог
stroke-width отличается от border, а при адаптиве или при увеличении/уменьшении масштаба некоторые элементы svg рамки, становятся как border
Ответ
Короткий ответ:
SVG stroke рисуется от осевой линии симметрично: если ширина линии - stroke-width="1px", то полпикселя будет выше осевой, вторая половина пикселя будет ниже осевой. Это для горизонтальной линии. Для вертикальной линии соответственно будет полпикселя влево и вправо от осевой. У вас форма фигуры совпадает с границами SVG и поэтому от трех линий вычитается по полпикселя, а хвостик, который вы обвели красным показывается целиком, поэтому он выглядит более жирным.
Я открыл ваш файл (без анимаций, чисто svg код) в векторном редакторе
серая линия это граница svg, что выходит за её пределы,- будет отрезано. Вы видите три линии шириной только по полпикселя. Вертикальный хвостик получается шириной 1px.
Тут ещё вмешивается эффект полупиксельного размытия для трех сторон, которые идут по границе SVG документа, поэтому линии не чёрные, а серые.
Решение
Увеличить высоту документа SVG минимум на 2px - height: 46px;
так как фигура всё равно останется прилипать кверху и влево, сдвинуть
её вправо и вниз на 1px
transform="translate(1 1)"
Ниже полный код решения:
svg {
width: 315px;
height: 46px;
top: 0;
left: 0;
fill: none;
stroke: black;
stroke-width: 1px;
overflow: visible;
}
.btn_wrap {
display: block;
width: 315px;
border: 1px solid black;
color: red;
padding: 12px 20px;
margin-top: 50px;
}
.animated-line {
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Каталог
Более подробно
Для того, чтобы не было потом проблем с кроссбраузерностью и мучений с позиционированием, когда встречаются svg и css элементы, в вашем случае это рамка svg и надпись css - каталог, а также ссылка на каталог, лучше всего это сделать внутри svg.
Поверьте, это не трудно, зато у вас никогда не распадется вёрстка и вам не придется мучительно долго искать причину.
Для добавления текста в svg имеется команда
В этом примере стили задаются внутри svg
Для управлениями стилями из внешней таблицы CSS необходимо добавить в первую строчку svg файла полный путь до внешней таблицы стилей.
Ссылку можно разместить внутри svg, например ссылкой будет текст.
Update
по комментариям автора вопроса
Добавлено масштабирование, то есть адаптивность к любому размеру экрана
width:25%;
height:25%;
Уменьшая, увеличивая эти проценты вы можете увеличивать, уменьшать изображение svg и тем самым изменять визуально толщину линий.
Скопируйте код из этого сниппета на свой ПК, так как сниппет немного искажает восприятие реального изображения.
Ниже полный код приложения с текстом в качестве ссылки внутри SVG
svg {
width:25%;
height:25%;
top: 0;
left: 0;
fill: none;
stroke: black;
stroke-width: 1px;
overflow: visible;
}
svg #textK {
font-size:24px;
font-family:serif;
font-weight:500;
stroke:none;
fill:black;
vector-effect:non-scaling-stroke;
}
.animated-line {
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Дополнительный бонус,- текст ссылки внутри svg индексируется поисковиками.
Ссылку можно сделать на весь блок SVG
Комментариев нет:
Отправить комментарий