我正在创建一个聊天程序，在屏幕上移动的一些图形与其他人聊天。
完成这个项目的最后一件事情之一是每当有人说话时，它会被放入一个可缩放的对话气泡中。
因为我很少使用SVG，并且这是我第一个真正的“游戏”项目，所以我想，“让我们使用一些CSS来确保它的正确缩放”。
所以我写了以下CSS：
.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;
}
/* 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; /* Can't be included in the shorthand to work */
bottom: -23px;
margin-left: -23px;
}
很遗憾，那并没有奏效。我后来发现这是因为SVG不支持所有的CSS属性。所以现在我有些困惑了？我不太确定如何在SVG中创建可缩放的文字气泡，希望你们中的一位可以友善地指点我正确的方向。
我已经尝试过的
SVG路径：我成功地创建了一个非常小的SVG路径，但我不确定如何使它变大并填充文本：
var mesasgeBox = chatSvg.path("M 200.444444444444446,200v-6h10.444444444444446v6h-4l-3.1111111111111107,1.6222222222222236l0.11111111111111072,-1.6222222222222236Z");