设置宽度和高度时，viewBox 似乎不起作用答案

【问题标题】：viewBox doesn't appear to work when width & height is set设置宽度和高度时，viewBox 似乎不起作用
【发布时间】：2013-06-30 12:07:11
【问题描述】：

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

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

谢谢

【问题讨论】：

如果设置宽度和高度，它们是固定的，因此 SVG 不会缩放，因为它不会改变大小。你想在这里做什么？您希望内部图像缩放但帧大小固定？
您好，感谢您的回复。我希望图像像这个例子一样缩放：jsfiddle.net/qCarc/2。因为我需要宽度和高度才能使用canvg将svg转换为图像。似乎如果我在 svg 上没有宽度或高度，canvg 会说它太大了。
转换的时候有没有试过临时设置宽高？
@ErikDahlström 不，我没有。你有任何例子吗？

标签： javascript svg d3.js width viewbox

【解决方案1】：

使用您指定的代码，渲染器将执行从 (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%”。

【讨论】：

但是，当我在 IE9 中使用 viewBox 时。它根本不起作用，这是一个已知问题吗？