Javascript 调整svg大小而不进行裁剪？

我正在一个电子桌面应用程序中处理d3时间线，我正在尝试将窗口的大小调整为全屏。我正在使用提供的建议，虽然它基本上可以工作，但当应用程序全屏运行时，D3SVG中较低的25%会被裁剪。我一直在为

preserveSpectratio

（）尝试不同的参数，但没有得到可接受的结果

我想要的是svg的完整“y”维度在不裁剪的情况下进行缩放，“x”维度在需要时进行拉伸。或者，可以根据需要挤压“y”维度，以显示全部内容

在这一点上，我只是戳代码，没有学到任何东西。我做错了吗

---

1024x768窗口大小

---

1400 x 900屏幕大小：裁剪出svg内容中较低的25%

---

代码来自

---

css

---

使用

的
preserveSpectratio
“…meet”

，只要SVG的高度设置为屏幕的高度，就不应裁剪SVG。如果是，则选项是您的

视图框

太小。“没有一张照片我们就说不出来了。”保勒博——谢谢。由于这是Electron中的桌面应用程序，因此无法通过JSFIDLE等提供工作示例。您甚至无法提取生成的HTML？

    d3.select("div#container")
        .classed("svg-container", true) //container class to make it responsive
        .append("svg")
        //responsive SVG needs these 2 attributes and no width and height attr
        // .attr("preserveAspectRatio", "none")
        // .attr("preserveAspectRatio", "xMidYMax slice")
        // .attr("preserveAspectRatio", "xMinYMid slice")
        .attr("preserveAspectRatio", "xMaxYMin meet")
        .attr("viewBox", function(){
            // RETURNS: "0, 0 984, 728"
            return 0 + " " + 0 +  " " + svgWidth + " " +  svgHeight;
        })
        //class to make it responsive
        .classed("svg-content-responsive", true);

 .svg-container {
     display: inline-block;
     position: relative;
     width: 100%;
     padding-bottom: 100%;
   
     vertical-align: top;
     overflow: hidden;
 }

 .svg-content-responsive {
     display: inline-block;
     position: absolute;
     top: 10px;
     left: 0;
 }