how to modify the slope in svg shape
I have created one svg shape. i want the slope start from middle. I tried. But i dont 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>
<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>
4 Replies
<svg width="342" height="126" viewBox="0 0 342 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b_1_2556)">
<path d="M171 1.35751H0.999985V115.358C0.999985 120.881 5.47714 125.358 11 125.358H331C336.523 125.358 341 120.881 341 115.358V37.7658H208.489C205.356 37.7658 202.404 36.2974 200.514 33.7986C200.514 33.7986 180.865 7.82349 178.975 5.32472C177.085 2.82595 174.133 1.35751 171 1.35751Z" fill="#5B85A4" fillOpacity="0.80"/>
<path d="M170.871 1.35751L0.999985 1.35751V115.358C0.999985 120.881 5.47714 125.358 11 125.358H331C336.523 125.358 341 120.881 341 115.358V37.7658H208.36C205.227 37.7658 202.275 36.2974 200.385 33.7986L178.846 5.32472C176.956 2.82595 174.004 1.35751 170.871 1.35751Z" 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>
<svg width="342" height="126" viewBox="0 0 342 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b_1_2556)">
<path d="M171 1.35751H0.999985V115.358C0.999985 120.881 5.47714 125.358 11 125.358H331C336.523 125.358 341 120.881 341 115.358V37.7658H208.489C205.356 37.7658 202.404 36.2974 200.514 33.7986C200.514 33.7986 180.865 7.82349 178.975 5.32472C177.085 2.82595 174.133 1.35751 171 1.35751Z" fill="#5B85A4" fillOpacity="0.80"/>
<path d="M170.871 1.35751L0.999985 1.35751V115.358C0.999985 120.881 5.47714 125.358 11 125.358H331C336.523 125.358 341 120.881 341 115.358V37.7658H208.36C205.227 37.7658 202.275 36.2974 200.385 33.7986L178.846 5.32472C176.956 2.82595 174.004 1.35751 170.871 1.35751Z" 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>
ok.. thanks
If you are writing the svg code by hand, there should be an explicit viewbox. Based on the numbers in the viewbox specification, you can determine the exact coordinate of the center. If you are not doing this by hand, there are various techniques to specify the exact center which vary depending on which software you are using.