Question

需要使用背景颜色“标记”svg文本项，必须使用javascript生成找到了一种工作方法，但它需要对文本进行编码，获取bbox值并在文本位置绘制一个rect。我不能使用“填充不透明度”（文本/背景需要高于其他元素！）并且使用纯色矩形，不再看到文本。

有了“第一个元素 - ＆gt;'画'第一个'或者最后一个元素会被看到，我再次重写文本元素..一切都好......但是有更简单的方法吗？

代码大致是这样的：

    var textColored = function (parent, text, idTxt, anchor, xT, yT, textColor, fillColor) {
    var labelText = $svg.text(idTxt,
        xT, yT,
        text, // "xTime.hh+":"+xTime.mm + " Sunset",
        {
            fill: textColor,
            "font-size": defaultOptions.fontSize,
            "text-anchor": anchor,
            "font-style": "italic"
        }
    )
    labelText.appendTo(parent);

    // background for text
    var bbox = $("#" + idTxt)[0].getBBox();
    var sRect = $svg.rect(
        // "x","y","width","height"
        bbox.x -2, bbox.y, bbox.width + 4, (+defaultOptions.fontSize + 3)
    )
        .attr("fill", fillColor)
//      .prependTo(parent);       // not working! added to first position of 'parent', see Inspector 
        .appendTo(parent);
    labelText.appendTo(parent);
}

尝试使用编辑后的代码来使用'.prependTo'，但是将背景元素添加到'parent'的顶部，因此在最低级别 - 后面添加所有其他svg元素。
同样失败的＆lt; g＆gt;罗伯特推荐的元素失败了（目前）可能会留下双重添加文本元素，使用脚本与bbox工作正常。如上所述，背景大小和位置必须基于文本“生成”。

svg文本与文本下的背景

0 个答案: