In the process of developing a chat program, I have animated figures moving across the screen engaging in conversations. One crucial aspect I am yet to implement is creating scalable speech bubbles for when users interact.
Being relatively new to SVG and working on my first serious game project, I decided to utilize CSS to ensure proper scaling. Here is the CSS code snippet I came up with:
.bubble {
background-color: #eee;
border: 2px solid #333;
border-radius: 5px;
color: #333;
display: inline-block;
font: 16px/24px sans-serif;
padding: 12px 24px;
position: relative;
}
.bubble:after,
.bubble:before {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eee;
bottom: -20px;
content: '';
left: 50%;
margin-left: -20px;
position: absolute;
}
/* Additional styling for second triangle (border) */
.bubble:before {
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-top: 23px solid;
border-top-color: inherit; /* Individual property needed */
bottom: -23px;
margin-left: -23px;
}
Unfortunately, this approach did not yield the desired results due to SVG's limitations in supporting certain CSS properties. At this point, I am unsure how to proceed. Can anyone provide guidance on how to create resizable speech bubbles in SVG?
Here is an example of an SVG path that I tried creating:
I successfully generated a small SVG path, but I am uncertain about enlarging it and filling it with text:
var mesasgeBox = chatSvg.path("M 200.444444444444446,200v-6h10.444444444444446v6h-4l-3.1111111111111107,1.6222222222222236l0.11111111111111072,-1.6222222222222236Z");