RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 770527
Accepted
Silentium
Silentium
Asked:2020-01-14 17:45:35 +0000 UTC2020-01-14 17:45:35 +0000 UTC 2020-01-14 17:45:35 +0000 UTC

如何使 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 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Alexandr_TT
    2020-01-15T05:54:58Z2020-01-15T05:54:58Z

    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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5