#javascript #html #css #svg
Есть линия и когда ее задаю на 100% то, она обрезается слева. Есть ли свойство у svg, чтобы линия нормально обрезалась под углом? То есть мне нужно чтобы линия svg заполнялась на всю ширину, и при этом показывались только полные пунктиры.
Ответы
Ответ 1
В svg есть инструмент - clipPath, который может вырезать по форме, которую вы зададите, в том числе и под углом обрежет. Но не в этом проблема,- вы сдвинули линию слишком сильно влево и поэтому обрезало изображение по вертикали. В этом случае и clipPath не поможет. Я посмотрел ваш файл в векторном редакторе и увидел, что вы копировали один и тот же элемент много раз. Код SVG поэтому получился очень длинный. Есть более рациональный способ сделать многочисленные повторения одного и того же элемента. Это заполнение паттерном какой-то фигуры. Вам нужно заполнить строку высотой 12px? В этом случае вы изготовляете pattern и заполняете им прямоугольник rect высотой 12px и длиной, которую выберите. Последовательность создания паттерна Если геометрическая фигура простая, то можно написать вручную через circle, rect, line Более сложные фигуры для паттерна придется создавать в векторных редакторах. Из рисунка видно, что фигура занимает квадрат 12х12px создаем паттернФигура не видна, так как находится в секции это как-бы склад из которого паттерн может использоваться для заполнения одной фигуры или нескольких. Более подробно о создании и использовании паттернов здесь и здесь. Заполнение паттерном фигуры Правило заполнения паттерном фигуры одинаковое для всех случаев: Сначала заполняется первая строка слева-направо, затем вторая строка и т.д В вашем случае это будет одна строка высотой 12px,- прямоугольник hieght="12px" Ниже пример кода: Изображение адаптивно к любому размеру дисплея. Чтобы линия всегда прижималась к левому краю - preserveAspectRatio="xMinYMin meet" Update 15.01.2018 По комментариям автора вопроса белые пробелы получаются шире чем были изначально, можно ли как-то ужать их? Для уменьшения пробелов, можно попробовать уменьшить ширину паттерна на 1px width="11" Если еще больше уменьшать, то станет заметна подрезка фигуры. Для более объективной оценки скачайте коды примеров на свой ПК, так как здесь в сниппете, иногда внешний вид несколько отличается от вида в чистом браузере. Пример с двумя линиями с паттерном по середине текст адаптивность изображения достигается применением процентов вместо фиксированных размеров для прямоугольников и текста.
Комментариев нет:
Отправить комментарий