Как можно сделать чтобы линия svg не обрезалась?

Есть линия и когда ее задаю на 100% то, она обрезается слева. Есть ли свойство у svg, чтобы линия нормально обрезалась под углом? То есть мне нужно чтобы линия svg заполнялась на всю ширину, и при этом показывались только полные пунктиры.

Ответ

В 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" Если еще больше уменьшать, то станет заметна подрезка фигуры.

Для более объективной оценки скачайте коды примеров на свой ПК, так как здесь в сниппете, иногда внешний вид несколько отличается от вида в чистом браузере.
Пример с двумя линиями с паттерном по середине текст
адаптивность изображения достигается применением процентов вместо фиксированных размеров для прямоугольников и текста.