Tips for adjusting the angle in SVG shapes

I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance?

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

https://i.sstatic.net/IYo9zIiW.png

javascripthtmlcsstypescriptsvg

Answer №1

Improve your SVG design by removing unnecessary elements
(Try experimenting to enhance your understanding of SVG)

Simplify and convert to a relative path using:

Add a distinct background color

Define an appropriate viewBox width and height

Adjust the (Horizontal) -166 value for better alignment (your path may have been drawn in reverse)

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>

Answer №2

To ensure the slope begins precisely from the center of the top edge, it is important to meticulously adjust the path coordinates. The midpoint of the top edge is established by the SVG's width. For instance, if the SVG width is 342 (as it terminates at x=341), the central point 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 commences at M171 1, indicating the exact midpoint of the top edge for an SVG width of 342.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

javascript with python

Currently, I'm in the process of parsing a html page. I've experimented with spynner, selenium, and mechanize, however none of them have been effective when dealing with JavaScript in this particular scenario. Is there anyone who can provide som ...

javascriptpythonhtmlmechanize

Eliminate the custom button feature from the Datatable

https://i.sstatic.net/7ndvv.png Is there a way to hide the Copy, CSV, Excel, PDF, and Print buttons located in the top right corner of the datatable? These seem to be default features of datatables, but I have been unable to find any information on how to ...

jqueryhtmldatatables

jQuery error: an unexpected token was encountered

I am encountering an issue with an "unexpected token =" error on the line toggleNav = function(evt){ in the code snippet below. Despite going through various similar posts, I am unable to pinpoint why this error is occurring. Any assistance in guiding me ...

javascriptjquery

Having trouble with my basic AJAX request; it's not functioning as expected

I am currently diving into the world of Ajax and I've hit a roadblock: 1. HTML : <body> <form> Username: <input type="text" id="username" name="username"/> <input type="submit" id="submit" /> </form> <scrip ...

javascriptphpjqueryajax

Tips for transferring data when clicking in Angular 5 from the parent component to the child component

I need assistance with passing data from a parent component to a child component in Angular 5. I want the child component to render as a separate page instead of within the parent's template. For example, let's say my child component is called & ...

angularhtmltypescript

What is causing the tabs to not update the navigation in nav-tabs?

I recently implemented a tab list using Bootstrap, similar to the one shown in the image below: https://i.sstatic.net/KEy7F.png However, I encountered an issue where clicking on "Profile" or "Contact" tabs does not change anything. Even though I inclu ...

htmlbootstrap-4bootstrap-5

Typescript: Determining the return type of a function based on its input parameters

I've been working on a function that takes another function as a parameter. My goal is to return a generic interface based on the return type of the function passed in as a parameter. function doSomething <T>(values: Whatever[], getter: (whatev ...

typescriptgenericstype-inference

Configuring a NestJS application to establish a TypeOrm connection using environment variables and @nestjs/config

Looking for the best way to set up a NestJS database using a .env file in compliance with legal requirements. The goal is to utilize the @nestjs/config package to import .env variables and incorporate them into the TypeOrmModule. It appears that utilizing ...

typescriptnestjstypeormdotenv

Is it possible to utilize a designated alias for an imported module when utilizing dot notation for exported names?

In a React application, I encountered an issue with imports and exports. I have a file where I import modules like this: import * as cArrayList from './ClassArrayList' import * as mCalc1 from './moduleCalc1' And then export them like t ...

javascriptreactjsmodule

Obtain information from an ajax request

I am working on a website where I need to implement a button that checks if the user has specific permissions before opening a new web page in a popup window. In my JavaScript code, I have the following function: function sendAjax(methodName, dataArray, s ...

javascriptc#ajax

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

Is there a better way to create a dynamic zebra styling for table rows while still being able to hide certain elements without losing the styling? In this code snippet, I'm using the CSS :nth-of-type(even) to style even rows but running into issues wh ...

javascriptjquerycsshtml

Can the height of one div be determined by the height of another div?

Here's the specific situation I am facing: I want the height of Div2 to adjust based on the content of Div3, and the height of Div3 to adapt based on the content in Div2. The height of Div1 is fixed at 500px. Some of the questions that arise are: I ...

javascripthtmlcsstwitter-bootstrap

Incorporate relationships while inserting data using Sequelize

vegetable.js ... var Vegetable = sequelize.define('Vegetable', { recipeId: { allowNull: false, ... }, name: { ... }, }); Vegetable.association = models => { Vegetable.belongsTo(models.Recipe); }; ... recipe.js ... var Recipe = sequeliz ...

javascriptnode.jsexpresssequelize.js

Utilize the power of EasyAutocomplete in jQuery to easily filter JSON

I have a functioning code, but I need help filtering JSON data to display labels of corresponding IDs greater than or equal to 3. In this scenario, only "India" and "France" should appear in the suggestion list. It's important to note that I am usin ...

javascriptjqueryjsonautocompletejquery-autocomplete

How can I center-align images in WordPress?

I've been encountering an issue with my blog on Wordpress. Lately, whenever I try to add images to my articles and align them in the center while writing the post, they appear centered in the draft but end up left-aligned once the article is published ...

htmlcsswordpress

What could be the reason for the GET request not functioning properly in Node.js?

const express = require('express'); const mongoose = require ("mongoose"); const app = express(); const Student = require('../models/students'); require('dotenv').config(); const PORT = process.env.PORT || 3000; const co ...

javascriptnode.jsangularmean

An absence of data causes the function to malfunction

One of the components in my application is responsible for rendering select elements on the screen, allowing users to dynamically order data. The initial state is as follows: state = { sortBy: [ { author: 'asc' } ] }; In this s ...

javascriptreactjs

Performing a unique mysql query based on the selection made using onchange event in a select element while sending

I have an issue with executing a query onchange in a select element. The goal is to retrieve a specific price for a product based on the size selected. As a beginner with Ajax, I am struggling to send multiple data parameters. The first parameter should ...

javascriptphpjquerymysqlajax

New to React and looking for guidance on implementing .forEach or .includes in my code

My task involves going through an array and checking if a string that the user inputs into the form exists in it. This can be achieved using forEach or .includes method. I am basically trying to filter out the array based on the input. If someone could de ...

javascriptreactjs

How can a controller configure an AngularJS provider by passing options?

How can I pass configuration options to a provider from a controller? Below is an example of how to pass options/configurations to a provider from the controller: provider.js file: app.provider('contactProvider', function() { this.name ...

javascriptjqueryangularjs