当设置宽度和高度时，viewBox不显示工作

我在我的svg元素上有一个viewBox。如果浏览器屏幕变小，我只希望它能缩放svg。但是，如果我尝试为我的svg符号设置宽度&，那么它也会停止缩放。当设置宽度和高度时，viewBox不显示工作

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

谁能告诉我，为什么是正常的行为，而不宽度&高度。我希望有一个设定的高度&高度。

感谢

来源

2013-07-02 Jose

如果你设置宽度和高度，它们是固定的，所以SVG不会缩放，因为它不会改变大小。你想在这里做什么？你想要缩放内部图像，但是帧大小需要修正？ – nrabinowitz

嗨，感谢您的回复。我想让图像像这个例子一样缩放：http://jsfiddle.net/qCarc/2/。因为我需要宽度和高度，以便使用canvg将svg转换为图像。看起来如果我没有宽度或高度的svg canvg说它太大了。 – Jose

您是否尝试过在转换时临时设置宽度和高度？ –

与您所指定的代码，什么渲染器将要做的就是缩小（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-03 14:45:20

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

我的示例SVG不适用于您的IE9吗？ –

当设置宽度和高度时，viewBox不显示工作

回答

相关问题