Question

我想要的是将textarea作为svg中的foriegnobject进行制作，我希望svg能够自动缩放以适应浏览器宽度。我可以制作textarea但遗憾的是滚动条不起作用。如果我删除了svg上的viewBox属性，那么滚动条可以工作，但缩放不会。这是我的index.html：

<!DOCTYPE html>
<html>
<head>
<title>Text Area Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>  
<div class="test">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1113.6298 591.67939"
version="1.1">
</svg>
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="test.js"></script>
</html>

以下是test.js文件的内容

var svg = d3.select("svg");

svg.append("foreignObject")
    .attr("width",205)
    .attr("height",380)
    .attr("x",10)
    .attr("y",10)
    .append("xhtml:body")

    .append("textarea")
    .attr("cols",35)
    .attr("rows",31)
    .attr("readonly","true")
    .attr("style","overflow:auto;font-size: 10px")
    .attr("id","My_TextArea");
var textarea;
for(var i=0;i<250;i++)
{
    textarea=document.getElementById("My_TextArea");
    textarea.value = textarea.value+ "\n"+i.toString();
    textarea.scrollTop = textarea.scrollHeight;
}

我可以通过删除viewBox行来使文本区域上的滚动条工作，但这会破坏我的页面缩放能力。如何使textarea上的滚动条工作？

viewBox属性阻止foreignObject textarea滚动（使用d3库）

0 个答案: