Question

我正在寻找一种方法，通过它我可以在SVG上显示一些多行文本数据以及滚动条。

我尝试过添加textarea以及foreignObject的选项，该对象适用于Chrome，FF，Opera但在IE中失败。

d3.select("g")
    .append('foreignObject')
    .attr("class", "csFObject")
    .attr("x", mouse[0] + 160)
    .attr("y", mouse[1] + 10)
    .attr('width', 280)
    .attr('height', 290)
    .append("textarea")
    .attr("cols", 37)
    .attr("rows", 14)
    .attr("readonly", "true")
    .attr("style", "overflow:auto;font-size: 14px;background-color:#ededed;border: 0px; width:280px;")
    .attr("x", mouse[0] + 160)
    .attr("y", mouse[1] + 20)
    .attr("id", "txtAreaGeoDescription")
    .attr("class", "txtAreaGeoDescription");

var textarea;
{
    textarea = document.getElementById("txtAreaGeoDescription");
    textarea.value = geoDescription;
    //textarea.scrollTop = textarea.scrollHeight;
}

所以寻找其他选择，我尝试的另一种方式是：

d3.select("g").append("g")
    .attr("width", 280)
    .attr("height", 290)
    .attr("class", "overlay")
    .append("text")
        .attr("x", mouse[0] + 160)
        .attr("y", mouse[1] + 20)
    .call(wrap, 280,geoDescription);

在这里，我可以在所有浏览器上看到数据，但是在显示5行数据后我需要一个滚动条。

有关如何使用滚动条在SVG上显示多行数据的任何建议。

如何在SVG上使用滚动条显示多行文本

0 个答案: