Question

我的svg元素上有一个viewBox。我只是希望它能够在浏览器屏幕缩小的情况下将svg扩展到缩放比例。但是，如果我尝试设置宽度＆amp;我的svg符号的高度也是STOPS缩放。

    var svg = d3.select("#svgpath").append("svg:svg") 
                .attr("viewBox", "0 0 1000 730")
                .attr("width", "900")
                .attr("height", "650")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .append("svg:g")
                .attr("transform", "translate(500,430)");

有人能告诉我为什么没有宽度和正常情况下表现正常高度。我希望有一个宽度和宽度高度。

感谢

Answer 1

使用您指定的代码，渲染器将执行的操作是缩小SVG文档的部分（0,0 - 1000,730）以适合矩形视口900x650。这是你的意图吗？从您的描述中不完全清楚。

要检查，请保存以下等效SVG并在浏览器中打开它。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="900" height="650" 
     viewBox="0 0 1000 730"
     preserveAspectRatio="xMinYMin meet">
  <g>
     <ellipse cx="500" cy="365" rx="500" ry="365"/>
   </g>
</svg>

椭圆宽900像素，高650像素。只要宽度和高度设置为这些值，它就会保持这个大小。

但是我怀疑你实际上打算做的是缩放SVG以适应“#svgpath”元素（我猜是<div>（？））。如果这就是你想要的，那么你应该做的是将宽度和高度设置为“100％”。

当宽度和宽度时，viewBox似乎不起作用高度设定

1 个答案: