Javascript viewBox属性停止foreignObject textarea滚动（使用d3库）
我想要的是在svg中创建一个textarea作为ForiegObject，我想要svg自动缩放以适应浏览器宽度。我可以创建文本区域，但遗憾的是滚动条无法工作。如果删除svg上的viewBox属性，则滚动条可以工作，但缩放不起作用。这是我的index.html：Javascript viewBox属性停止foreignObject textarea滚动（使用d3库）,javascript,svg,d3.js,textarea,Javascript,Svg,D3.js,Textarea,我想要的是在svg中创建一个textarea作为ForiegObject，我想要svg自动缩放以适应浏览器宽度。我可以创建文本区域，但遗憾的是滚动条无法工作。如果删除svg上的viewBox属性，则滚动条可以工作，但缩放不起作用。这是我的index.html： <!DOCTYPE html> <html> <head> <title>Text Area Test</title> <meta http-equiv="Content-
<!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>
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上的滚动条正常工作？请注意，我正在使用chrome作为浏览器，这就是我目前关心的所有问题。您能找到解决方案吗？