Html - how to modify the slope in svg shape

RuralSmack
July 8, 2024
49 views
0 votes
2 Answers

I have created one svg shape. I want the slope to start from middle. I tried,but I don’t know how to make it. Can anyone please help me.

<svg xmlns="http://www.w3.org/2000/svg" fill="none">
      <g filter="url(#filter0_b_1_2556)">
        <path
          d="M176.291 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 1Z"
          fill="#5B85A4"
          fillOpacity="0.80"
        />
        <path
          d="M176.291 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 1Z"
          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>

Answers

To ensure the slope starts exactly from the middle of the top edge, need to adjust the path coordinates carefully. The middle of the top edge is determined by the width of the SVG. If the SVG width is 342 (since it ends at x=341), the middle would be at 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>

The path now starts at M171 1, which is the middle of the top edge for an SVG width of 342.

Clean up your SVG by deleting all unrequired stuff
(by trial and error first, you will learn SVG along the way)

Remove precision and convert to a relative path with: https://yqnn.github.io/svg-path-editor/#

Add a contrasting background color

Set a proper viewBox width and height

Change the (Horizontal) -166 value to adjust (your path was/is drawn counter-clockwise)

svg {
  width:200px;
  background:hotpink;
}

<svg viewBox="0 0 342 126">
  <path d="m1 1v114c0 6 4 10 10 10h320c6 0 10-4 10-10v-78h  -166  c-3 0-6-1-8-4l-22-28c-2-3-5-4-8-4z" 
        fill="#5B85A4" 
        fillOpacity="0.80" 
        stroke="blue" 
        strokeOpacity="0.9" />
</svg>
<svg viewBox="0 0 342 126">
  <path d="m1 1v114c0 6 4 10 10 10h320c6 0 10-4 10-10v-78h  -200  c-3 0-6-1-8-4l-22-28c-2-3-5-4-8-4z" 
        fill="#5B85A4" 
        fillOpacity="0.80" 
        stroke="blue" 
        strokeOpacity="0.9" />
</svg>
<svg viewBox="0 0 342 126">
  <path d="m1 1v114c0 6 4 10 10 10h320c6 0 10-4 10-10v-78h  -20  c-3 0-6-1-8-4l-22-28c-2-3-5-4-8-4z" 
        fill="#5B85A4" 
        fillOpacity="0.80" 
        stroke="blue" 
        strokeOpacity="0.9" />
</svg>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to modify the slope in svg shape

Answers