0

我的 svg 元素上有一个 viewBox。如果浏览器屏幕变小，我只是希望它可以缩放 svg 以进行缩放。但是，如果我尝试为我的 svg 符号设置宽度和高度，它也会停止缩放。

    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)");

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

谢谢

4

1 回答 1

0

使用您指定的代码，渲染器将执行从 (0,0 - 1000,730) 缩小 SVG 文档的部分以适合矩形视口 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%”。

于 2013-07-03T14:45:20.053 回答