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 path 我试过了:

我设法创建了一个非常小的SVG路径但是我不确定如何使它更大并使其充满文本:

    var mesasgeBox = chatSvg.path("M 200.444444444444446,200v-6h10.444444444444446v6h-4l-3.1111111111111107,1.6222222222222236l0.11111111111111072,-1.6222222222222236Z");

Answer 1

下面的源代码需要一个位置 (x/y) 来知道出现在哪里以及文本换行的最大宽度。它被编写为插件，因此您可以轻松使用它。我没有对其进行优化，可以通过font-size缓存字母宽度来提高性能。
字体换行代码基于此处的解决方案How to either certain SVG text box width, orforce linebreak 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 示例中。

UPDATE 2
I 更新源示例。