如何修改svg形状的斜率

Answer 1

为了确保斜坡恰好从顶部边缘的中间开始，需要仔细调整路径坐标。上边缘的中间由 SVG 的宽度确定。如果 SVG 宽度为

342

（因为它结束于

x=341

），则中间将位于

x=171

。

<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="342" height="126">
  <g filter="url(#filter0_b_1_2556)">
    <path
      d="M171 1H1V115C1 120.523 5.47716 125 11 125H331C336.523 125 341 120.523 341 115V37.4083H213.78C210.647 37.4083 207.695 35.9399 205.805 33.4411L184.266 4.96721C182.376 2.46844 179.424 1 176.291 1H171Z"
      fill="#5B85A4"
      fillOpacity="0.80"
    />
    <path
      d="M171 1H1V115C1 120.523 5.47716 125 11 125H331C336.523 125 341 120.523 341 115V37.4083H213.78C210.647 37.4083 207.695 35.9399 205.805 33.4411L184.266 4.96721C182.376 2.46844 179.424 1 176.291 1H171Z"
      stroke="white"
      strokeOpacity="0.9"
    />
  </g>
  <defs>
    <filter
      id="filter0_b_1_2556"
      x="-53.5"
      y="-53.5"
      width="449"
      height="233"
      filterUnits="userSpaceOnUse"
      colorInterpolationFilters="sRGB"
    >
      <feFlood floodOpacity="0" result="BackgroundImageFix" />
      <feGaussianBlur in="BackgroundImageFix" stdDeviation="27" />
      <feComposite
        in2="SourceAlpha"
        operator="in"
        result="effect1_backgroundBlur_1_2556"
      />
      <feBlend
        mode="normal"
        in="SourceGraphic"
        in2="effect1_backgroundBlur_1_2556"
        result="shape"
      />
    </filter>
  </defs>
</svg>

路径现在从

M171 1

开始，这是 SVG 宽度为

342

的顶部边缘的中间。