主页 / 问题 / 770527
Accepted
Silentium
Asked:2020-01-14 17:45:35 +0800 CST2020-01-14 17:45:35 +0800 CST

如何使 svg 线不被切断？

  • 772

在此处输入图像描述

有一条线，当我将其设置为 100% 时，它在左侧被切断。y 是否具有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>

javascript

1 个回答

  1. Best Answer

    svg - 中有一个工具clipPath，可以切割成你指定的形状，包括切割成一定角度。但这不是问题 - 您将线条向左移动了太远，因此垂直裁剪了图像。在这种情况下， clipPath它无济于事。
    我在矢量编辑器中查看了您的文件，发现您多次复制了相同的元素。因此代码SVG很长。有一种更合理的方法可以对同一元素进行多次重复。

    这是用图案填充图形。
    你需要填充一条高度为 12px 的线吗？在这种情况下，您使用您选择的高度和长度 制作pattern并填充它。rect12px

    • 创建图案的顺序
      如果几何图形很简单，则可以使用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>因此可以说是一个仓库，可以使用该图案填充一个或多个图形。在此处和此处了解有关创建和使用模式的更多信息。

    • 用图案填充图形
      用图案填充图形的规则对于所有情况都是相同的：
      首先，第一行从左到右填充，然后是第二行，依此类推。在您的情况下，它将是一行high 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"

    更新 01/15/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>

    要进行更客观的评估，请将示例代码下载到您的 PC，因为在此处的代码片段中，有时外观与纯浏览器中的视图略有不同。

    文本中间带有图案的两行示例

    图像适应性是通过使用百分比而不是矩形和文本的固定大小来实现的。

       


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

    • 3

相关问题