javascript - Svg (snapsvg) 创建一个对话泡泡

Question

我正在创建一个聊天程序，屏幕上有一些人物四处移动，与其他人聊天。

我需要完成这个元素的最后一件事是，每当有人说些什么时，它就会被放入一个可扩展的对话泡泡中。

因为我在使用 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");

Answer 1

下面的源代码需要一个位置 (x/y) 来知道出现的位置和文本换行的最大宽度。它是作为插件编写的，因此您可以轻松使用它。我没有优化它，可以通过按字体大小缓存字母宽度来提高性能。
字体环绕代码基于此处的解决方案 How to either determine SVG text box width, or force line breaks after 'x' characters?

请将插件中的 paper.rect 替换为您喜欢的气泡布局。

Snap.plugin(function (Snap, Element, Paper, glob) {
     Paper.prototype.bubbletext = function (x, y, txt, maxWidth, attributes) {

        var svg = Snap();
        var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.";
        var preText = svg.text(0, 0, abc);
        preText.attr(attributes);
        var letterWidth = (preText.getBBox().width / abc.length);
        svg.remove();

        var words = txt.split(" ");
        var widthCalc = 0, activeLine = 0, lines=[''];
        for (var letterCount = 0; letterCount < words.length; letterCount++) {

           var l = words[letterCount].length;
           if (widthCalc + (l * letterWidth) > maxWidth) {
              lines.push('');
              activeLine++;
              widthCalc = 0;
           }
           widthCalc += l * letterWidth;
           lines[activeLine] += words[letterCount] + " ";
        }

        var padding = 10;

        var t = this.text(x+padding, y+15+padding, lines).attr(attributes);

        t.selectAll("tspan:nth-child(n+2)").attr({
           dy: "1.2em",
           x: x+padding
        });

        var boxHeight = t.node.clientHeight + (padding * 3);
        var messageBox = this.path("M " + (x-padding) + "," + (y-padding+boxHeight) + "v-" + boxHeight + "h" +  (t.node.clientWidth + (padding*3)) + "v"+boxHeight+"h-6l-9,15l0,-15Z");
        messageBox.attr({
            fill:"rgba(0, 0, 255, .3)"
        });
        t.before(messageBox);
        return t;
     };
  });

var div = document.querySelector('div.wrap');
var bubble = Snap('100%','100%').attr({ viewBox: '0  0 200 200' });;
bubble.bubbletext(0, 0, "Hallo Mike how are you. These text is auto wraped and the bubble size automaticaly. The svg result is also scaleable. Please change this text to test.", 155,
    { "font-size": "15px", "fill": "#000"});
div.appendChild(bubble.node);

CODEPEN

更新

将您的气泡布局添加到代码笔示例中。

更新 2
我更新源示例。