How can I make the svg line not cut?

Question

There is a line and when I ask it 100%, it is cut off to the left. Does svg have a property so that the line is normally cut off at an angle? That is, I need the svg line to fill the entire width, and only full dotted lines will be shown.

  <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>

Accepted Answer · 2018-01-14T21:54:58

In svg there is a tool - clipPath , which can cut according to the form you specify, including at the angle it cuts. But this is not the problem - you moved the line too far to the left and therefore cropped the image vertically. In this case clipPath will not help either.
I looked at your file in a vector editor and saw that you copied the same element many times. The SVG code is therefore very long. There is a more rational way to do multiple repetitions of the same element.

This is filling with a pattern of some shape.
Need to fill a 12px string? In this case, you make a pattern and fill it with a rectangle rectangular 12px height and the length you choose.

Pattern Creation Sequence
If the geometric shape is simple, then you can write by hand through circle , rect , line
More complex shapes for the pattern will have to be created in vector editors.
The figure shows that the figure occupies a square 12х12px
create a pattern

  <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>

The figure is not visible, as it is located in the <defs> section, as if the warehouse from which the pattern can be used to fill a single figure or several. Learn more about creating and using patterns here and here .

Fill the shape pattern
The rule for filling with a pattern of a figure is the same for all cases:
First, the first line is filled from left to right, then the second line, etc. In your case it will be one line 12px high, - rectangle hieght = "12px"

Below is a sample code:
The image is adaptive to any display size.

 <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>

So that the line is always pressed to the left -

 preserveAspectRatio="xMinYMin meet"

Update 01/15/2018
According to the comments of the author of the question

white spaces are wider than they were originally, is it possible to somehow shrink them?

To reduce the gaps, you can try to reduce the width of the pattern by 1px width="11" If you decrease further, the trimming of the shape will become noticeable.

 <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>

For a more objective assessment, download the sample codes to your PC, as here in the snippet, sometimes the appearance is somewhat different from the view in a clean browser.

An example with two lines with a pattern in the middle of the text.

image adaptability is achieved by using percentages instead of fixed sizes for rectangles and text.

 <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>

But I would like to clarify 2 more points: 1) If you do fill the pattern with a width element: 12px, then white spaces are wider than they were originally, can you somehow shrink them?
2) When your example adapts, the line is proportionally reduced, and can it be done so that the height of the dotted line remains constant, and only the number of dotted lines decreases
@Silentium I took your file, drove it in inkscape, left only one element in the picture in the answer you can see.
The option that you ask will not be adaptive, since in svg everything is considered proportionally - you change the length, the height changes.
So that the height does not change, you need to make it fixed, as you had in the question
@Silentium added to the response a variant with a decrease in the width of the pattern, which should reduce the spaces between the figures.
To get the desired look, as you need as a result, play with width values height viewBox = "0 0 1200 12" in the SVG file header. To understand how these parameters affect scaling read this post ru.stackoverflow.com/q/ 615562/28748 If the answer was useful to you here, please do not forget to tick it

How can I make the svg line not cut?

1 answer 1

More articles: