當設置寬度和高度時，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不顯示工作

回答

相關問題