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

Question

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

    <svg xmlns="http://www.w3.org/2000/svg"  height="12" viewBox="0 0 438 12">
    <path fill="#000" fill-rule="evenodd" d="M-629.714 1.172s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.223 0s2.275-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.223 0s2.275-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.223 0s2.275-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.286-9.79zm8.251 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.502 0s2.275-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.42 0s2.275-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.222 0s2.276-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.908 2.333-6.46 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.501 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.223 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.46 0l5.285-9.79zm8.252 0s2.276-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.908 2.333-6.46 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.908 2.333-6.46 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.908 2.333-6.46 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.46 0c-5.872 11.275-5.285 9.791-5.285 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79zm8.502 0s2.276-2.637 6.46 0c-5.873 11.275-5.285 9.791-5.285 9.791s-1.91 2.333-6.461 0l5.286-9.79zm8.222 0s2.276-2.637 6.461 0c-5.873 11.275-5.286 9.791-5.286 9.791s-1.909 2.333-6.46 0l5.285-9.79z" opacity=".1"/>
</svg>

Alexandr_TT · Accepted Answer · 2018-01-15T07:54:20.467

В svg есть инструмент - clipPath, который может вырезать по форме, которую вы зададите, в том числе и под углом обрежет. Но не в этом проблема,- вы сдвинули линию слишком сильно влево и поэтому обрезало изображение по вертикали. В этом случае и clipPath не поможет.
Я посмотрел ваш файл в векторном редакторе и увидел, что вы копировали один и тот же элемент много раз. Код SVG поэтому получился очень длинный. Есть более рациональный способ сделать многочисленные повторения одного и того же элемента.

Это заполнение паттерном какой-то фигуры.
Вам нужно заполнить строку высотой 12px? В этом случае вы изготовляете pattern и заполняете им прямоугольник rect высотой 12px и длиной, которую выберите.

Последовательность создания паттерна
Если геометрическая фигура простая, то можно написать вручную через circle, rect, line
Более сложные фигуры для паттерна придется создавать в векторных редакторах.
Из рисунка видно, что фигура занимает квадрат 12х12px
создаем паттерн

     <defs >
      <pattern id="rectPat"  x="0" y="0" width="12" height="12"
                 patternUnits="userSpaceOnUse" >
      <path d="m-629.7 1.2c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0l5.3-9.8zm635.2 0c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0C1.9 7.7 3.7 4.4 5.5 1.2Z" id="path4" style="stroke:none;fill:#000;opacity:0.5"/>
      </pattern>
      </defs>

Фигура не видна, так как находится в секции <defs> это как-бы склад из которого паттерн может использоваться для заполнения одной фигуры или нескольких. Более подробно о создании и использовании паттернов здесь и здесь.

Заполнение паттерном фигуры
Правило заполнения паттерном фигуры одинаковое для всех случаев:
Сначала заполняется первая строка слева-направо, затем вторая строка и т.д В вашем случае это будет одна строка высотой 12px,- прямоугольник hieght="12px"

Ниже пример кода:
Изображение адаптивно к любому размеру дисплея.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1200 12" 
preserveAspectRatio="xMinYMin meet" >
  <defs >
  <pattern id="rectPat"  x="0" y="0" width="12" height="12"
             patternUnits="userSpaceOnUse" >
  <path d="m-629.7 1.2c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0l5.3-9.8zm635.2 0c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0C1.9 7.7 3.7 4.4 5.5 1.2Z"  style="stroke:none;fill:#000;opacity:0.3"/>
  </pattern>
  </defs>
<rect x="0" y="0" width="100%" height="12" fill="url(#rectPat)"  />
  </svg>

Чтобы линия всегда прижималась к левому краю -

preserveAspectRatio="xMinYMin meet"

Update 15.01.2018
По комментариям автора вопроса

белые пробелы получаются шире чем были изначально, можно ли как-то ужать их?

Для уменьшения пробелов, можно попробовать уменьшить ширину паттерна на 1px width="11" Если еще больше уменьшать, то станет заметна подрезка фигуры.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="5%" viewBox="0 0 1200 12" 
preserveAspectRatio="xMinYMin meet" >
<defs >
  <pattern id="rectPat"  x="0" y="0" width="11" height="12"
             patternUnits="userSpaceOnUse" >
  <path d="m-629.7 1.2c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0l5.3-9.8zm635.2 0c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0C1.9 7.7 3.7 4.4 5.5 1.2Z"  style="stroke:none;fill:#000;opacity:0.3"/>
  </pattern>
  </defs>
<rect x="0" y="0" width="100%" height="12" fill="url(#rectPat)"  />
</svg>

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

Пример с двумя линиями с паттерном по середине текст

адаптивность изображения достигается применением процентов вместо фиксированных размеров для прямоугольников и текста.


<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="5%" viewBox="0 0 1200 25" 
preserveAspectRatio="xMinYMin meet" >
<defs >
  <pattern id="rectPat"  x="0" y="0" width="12" height="12"
             patternUnits="userSpaceOnUse" >
  <path d="m-629.7 1.2c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0l5.3-9.8zm635.2 0c0 0 2.3-2.6 6.5 0-5.9 11.3-5.3 9.8-5.3 9.8 0 0-1.9 2.3-6.5 0C1.9 7.7 3.7 4.4 5.5 1.2Z"  style="stroke:none;fill:#000;opacity:0.3"/>
  </pattern>
  </defs>
  <g transform="translate(0 10)">
<rect x="0" y="0" width="40%" height="12" fill="url(#rectPat)"  />
<text x="41%" y="12" font-size="1.5em" font-family="serif" fill="grey">Ваш заголовок текст</text>
<rect x="60%" y="0" width="40%" height="12" fill="url(#rectPat)"  />
</g>
  </svg>

@Qwertiy Орлиный глаз! Конечно clipPath сейчас исправлю — Alexandr_TT, Jan 14 '18 at 22:29
@Alexandr_T спасибо за хороший развернутый ответ! Но хотел бы еще 2 момента уточнить: 1) Если делать заполнение паттерном элементом width: 12px то белые пробелы получаются шире чем были изначально, можно ли как-то ужать их? 2) Когда адаптивится ваш пример, то линия пропорционально уменьшается, а можно ли сделать так что высота пунктира оставалась постоянной, а уменьшалось только количество пунктиров — Silentium, Jan 15 '18 at 07:08
@Silentium Я брал ваш файл, загонял в inkscape, оставил только один элемент на рисунке в ответе видно. А дальше идет масштабирование. В комментарии у вас width:12px может height="12px" ? Вариант, который просите вы будет не адаптивен, так как в svg всё считается пропорционально - изменяете длину, меняется высота. Чтобы высота не менялась её нужно сделать фиксированной, как у вас было в вопросе — Alexandr_TT, Jan 15 '18 at 07:17
@Silentium добавил в ответ вариант с уменьшением ширины паттерна, что должно уменьшить пробелы между фигурами. Для получения нужного внешнего вида, как вам надо в итоге, поиграйте со значениями width height viewBox="0 0 1200 12" в шапке SVG файла Для понимания, как эти параметры влияют на масштабирование почитайте вот этот пост https://ru.stackoverflow.com/q/615562/28748 Если ответ вам здесь был полезен, пожалуйста не забудьте отметить его галочкой — Alexandr_TT, Jan 15 '18 at 08:03

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

1 Answers1