Страницы

Поиск по вопросам

вторник, 13 ноября 2018 г.

Какими способами можно решить проблему с шириной строк?

Прошу Ваших советов в реализации данной задачи.

Я реализовал анимацию с помощью 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
КАТАЛОГ
Для управлениями стилями из внешней таблицы 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

КАТАЛОГ

Комментариев нет:

Отправить комментарий