SVG path with dynamic elements

Consider the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="237" height="129" viewBox="0 0 237 129" fill="none">
                <path d="M228 1H9C4.58172 1 1 4.58172 1 9V91V104V127L20 111.483L228 112C232.418 112 236 108.418 236 104V9C236 4.58172 232.418 1 228 1Z" fill="#F6F6F6" />
                <path d="M1 104V9C1 4.58172 4.58172 1 9 1H228C232.418 1 236 4.58172 236 9V104C236 108.418 232.418 112 228 112L20 111.483L1 127V91" stroke="#E8E8E8" />
                <foreignObject x="15" y="0" width="200" height="130">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </foreignObject>
             </svg>

            <svg xmlns="http://www.w3.org/2000/svg" width="235" height="86" viewBox="0 0 235 86" fill="none">
                <path d="M8 0H227C231.418 0 235 3.58172 235 8V50V63V86L216 70.4828L8 71C3.58173 71 0 67.4183 0 63V8C0 3.58172 3.58173 0 8 0Z" fill="#5DB075"/>
                <foreignObject x="15" y="0" width="200" height="80">
                    <p style="color: white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                </foreignObject>
            </svg>

I am considering making the height of the SVG dynamic based on text length.

For example, the first SVG would be modified to:

<svg xmlns="http://www.w3.org/2000/svg" width="237" height={(50 + (27 * text.length / 27))} viewBox={`0 0 237 ${50 + (27 * text.length / 27)}`} fill="none">
        <path d="M228 1H9C4.58172 1 1 4.58172 1 9V91V104V127L20 111.483L228 112C232.418 112 236 108.418 236 104V9C236 4.58172 232.418 1 228 1Z" fill="#F6F6F6" />
        <path d="M1 104V9C1 4.58172 4.58172 1 9 1H228C232.418 1 236 4.58172 236 9V104C236 108.418 232.418 112 228 112L20 111.483L1 127V91" stroke="#E8E8E8" />
        <foreignObject x="15" y="15" width="150" height={(20 + (27 * text.length / 27))}>
            <p>{text}</p>
        </foreignObject>
    </svg>

The second SVG would be updated in a similar manner:

<svg xmlns="http://www.w3.org/2000/svg" width="235" height={(50 + (27 * text.length / 27))} viewBox=`0 0 237 ${50 + (27 * text.length / 27)}" fill="none">
        <path d="M8 0H227C231.418 0 235 3.58172 235 8V50V63V86L216 70.4828L8 71C3.58173 71 0 67.4183 0 63V8C0 3.58172 3.58173 0 8 0Z" fill="#5DB075" />
        <foreignObject x="15" y="15" width="150" height={(20 + (27 * text.length / 27))}>
            <p style="color: white">{text}</p>
        </foreignObject>
    </svg>

An issue with this method is that the path D does not reflect the actual height dynamically when the text is short.

If the text is short, it may look something like:

<svg xmlns="http://www.w3.org/2000/svg" width="237" height="50" viewBox="0 0 237 50" fill="none">
                <path d="M228 1H9C4.58172 1 1 4.58172 1 9V91V104V127L20 111.483L228 112C232.418 112 236 108.418 236 104V9C236 4.58172 232.418 1 228 1Z" fill="#F6F6F6" />
                <path d="M1 104V9C1 4.58172 4.58172 1 9 1H228C232.418 1 236 4.58172 236 9V104C236 108.418 232.418 112 228 112L20 111.483L1 127V91" stroke="#E8E8E8" />
                <foreignObject x="15" y="0" width="200" height="130">
                    <p>test</p>
                  </foreignObject>
             </svg>

            <svg xmlns="http://www.w3.org/2000/svg" width="235" height="50" viewBox="0 0 235 50" fill="none">
                <path d="M8 0H227C231.418 0 235 3.58172 235 8V50V63V86L216 70.4828L8 71C3.58173 71 0 67.4183 0 63V8C0 3.58172 3.58173 0 8 0Z" fill="#5DB075"/>
                <foreignObject x="15" y="0" width="200" height="80">
                    <p style="color: white">test</p>
                </foreignObject>
            </svg>

Are there any alternative methods to dynamically adjust the SVG shape based on text length?

htmlcssreactjssvg

Answer №1

Here is a solution to replicate the style in html/css. Feel free to customize the CSS according to your preferences such as colors and bubble shapes.

.buble {
  padding: 0;
  margin: 0.5rem 0;
  min-width: min-content;
  clear: both;
  hyphens: auto;
}

.recv {
  background: whitesmoke;
  border: 2px solid silver;
  border-radius: 0.5rem;
  padding: 0 1rem;
  float: left;
}

.recv.handle:after {
  content: "";
  background: whitesmoke;
  border: 2px solid silver;
  border-top: none;
  border-right: none;
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: 1rem;
  z-index: 1;
  transform: skewY(-45deg) translate(0, -0.5rem);
}

.send {
  text-align: right;
  float: right;
  background: #99dd99;
  border: 2px solid green;
  border-radius: 0.5rem;
}

.send.handle:after {
  content: "";
  background: #99dd99;
  border: 2px solid green;
  border-top: none;
  border-left: none;
  position: absolute;
  height: 1rem;
  width: 1rem;
  z-index: 1;
  right: 1rem;
  transform: skewY(45deg) translate(0, -0.5rem);
}

p {
  padding: 0;
  margin: 0.25rem 0.5rem;
  position: relative;
  z-index: 2;
  min-height: 1rem;
}

#container {
  position: relative;
  width: 400px;
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Custom Chat Design with CSS</title>
</head>

<body>
  <div id="container">
    <div class="buble recv handle">
      <p>Received a long message with a handle, allowing for automatic line wrapping.</p>
    </div>

    <div class="buble send">
      <p>Sent a short message without a handle</p>
    </div>

    <div class="buble recv">
      <p>Received message</p>
    </div>

    <div class="buble send handle">
      <p>Multi-line messages work well here. This is a long sent message with a handle.</p>
    </div>

    <div class="buble recv handle">
      <p>Received another message</p>
    </div>

    <div class="buble recv handle">
      <p>And one more received message</p>
    </div>
  </div>
</body>

</html>

Answer №2

Using Standard HTML and CSS:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla quam eu faci lisis mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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

Creating responsive lines with CSS on top of an image

I would like to add lines on an image using CSS3 and HTML5 Canvas. I came across a tutorial and demo that utilizes an html div: However, when attempting this effect on an image, the line appears outside of the image. How can I ensure that the line is dra ...

cssimagelines

change visibility:hidden to visible in a css class using JavaScript

I've put together a list of Game of Thrones characters who might meet their demise (no spoilers included). However, I'm struggling with removing a CSS class as part of my task. Simply deleting the CSS is not the solution I am looking for. I' ...

javascripthtmlcss

"Exploring ways to retrieve the selected option value in HTML by utilizing the find() function in a Node.js Express application that is

I am currently facing an issue with retrieving a specific document from MongoDB using the find() method. I'm encountering a problem where the result returned is not what I expect in the HTML file. For example, I select MALE and XL, which I know exist ...

htmlsqlnode.jsmongodbexpress

How to access a variable from within a Phonegap DB function and return it outside of the

I'm struggling with a phonegap db JavaScript script that isn't returning the final string variable "feeds" outside the function. It's currently showing as "undefined". I need help making the necessary changes to properly return the "feeds" v ...

javascriptjqueryhtmlsqlitecordova

Issue with external JavaScript file being unresponsive on mobile browser

Hello everyone, hope you're having a great afternoon or evening I've encountered an issue with mobile browsers like Chrome Mobile and Kiwi where the external js file is not visible in the html file. The script.js file looks like this: alert(&ap ...

javascripthtmlmobileexternal

Unable to resolve the "Error: posts.map is not a function" issue

I am currently developing a social media-like web application. One of the features I'm working on is to display all posts made by users. However, when I run my code, it doesn't show anything and I get an error in the console that says "Uncaught T ...

javascriptreactjsfirebase

How can I resolve the dependency problem with create-react-app?

As a beginner delving into React, I encountered an issue while attempting to create a project in VSCode using npx create-react-app app. The following error message popped up: PS C:\Users\USER\Desktop\folder> npx create-react-app app ...

node.jsreactjsnpmcreate-react-appreact-scripts

Zoom in and Zoom out functions in ngPdf with centered view

I have incorporated the pdf canvas to showcase PDFs on my AngularJS/Bootstrap application, and I must say, the preview feature is working exceptionally well. However, one thing that I would like to achieve is centering either my modal or the canvas itself ...

cssangularjscanvaszooming

What is the reason behind having to restart the npm server each time?

When first learning Reactjs with VSCode, there was no need to restart the server after making modifications. However, now I find that I must restart the server every time I make a change in order for those changes to be applied. ...

javascriptnode.jsreactjsnpm

Is there a way to enlarge the icon when I hover over the text using framer motion combined with material ui?

Whenever I try to hover over the text, it only scales the icon. It doesn't seem to work when I attempt to hover over it. <ListItem sx={{ fontSize: '14px' }}> <motion.div style={{ display: 'flex', alignItems: 'cent ...

reactjsmaterial-ui

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have: <div class="parent"> I should change my color to green when clicked <div class="elem ...

jqueryhtmlcss

What is the method for determining the number of unique tags on a webpage using JavaScript?

Does anyone have a method for determining the number of unique tags present on a page? For example, counting html, body, div, td as separate tags would result in a total of 4 unique tags. ...

javascripthtml

What are some possible reasons for an API fetch failing to retrieve data from a URL, and what are potential solutions to address this issue?

Struggling to retrieve data from the server using frontend code. Below is an example of fetching user details, but it's not functioning as expected. const UserDetails = async () => { const apiUrl = process.env.REACT_APP_API_URL; try { cons ...

reactjsnode.jscors

Is NextJS executing Pages and Components on Server, Browser, or Both Environments?

Recently, I encountered an issue with my NextJS page... function MyPage({ props }) { console.log('page') return (<> <MyComponent /> </>) } This issue involved a particular component as well... export functio ...

reactjsnext.js

Encountering an issue with the message "chartobject-1.render() Error >> Unable to locate the container DOM element." within a JavaScript function

I have encountered an issue while working with Fusion Charts in my HTML page using JavaScript. When attempting to display two charts simultaneously, I receive an error message that says: "fusioncharts.js:71 Uncaught RuntimeException: #03091456 chartobjec ...

javascripthtmljsonajaxfusioncharts

Is Babel necessary for enabling JavaScript compatibility in my TypeScript React project, excluding Create React App?

This is the webpack configuration for my React project built in TypeScript, module.exports = { mode: 'development', entry: ['./src/main.tsx'], module: { rules: [ { // Rule for ts/tsx files only, no rule for js/js ...

javascriptreactjstypescriptwebpackbabel-loader

Tips on maintaining an initial-scale of 1.0 for the viewport in ReactJS projects created with Create React App

Currently, I am working on a ReactJS project with create-react-app. Within my public folder, there is an HTML file that includes the following code: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Strangely ...

reactjscreate-react-appmeta-tags

Ignoring the no-unused-vars rule from StandardJS even though variables are being used

Within my Typescript React project, I have declared the following: export type NavState = { mounted: boolean } I then proceeded to use this within a component like so: import { NavState } from '../../models/nav' class Nav extends React.Compon ...

reactjstypescriptvisual-studio-codestandardjs

Add a directive on the fly, establish a connection, and display it dynamically

Within my markup, I have a tag element called popup-window which is handled by a specific directive. If I wish to incorporate multiple similar widgets that can be displayed or hidden in various locations, I currently need to include all these elements dire ...

javascripthtmlangularjs

Preventing React setState from replacing the entire object

When attempting to update a customer's age using setState, the object is altered before calling setState, but the existing object is not updated. customerOnChange(event, field) { //Customer's age currently set at 80 var customer = { ...t ...

javascriptreactjs