SVG圖形具有可變寬度

Question

我試圖創建具有一個固定的寬度，以左邊爲X軸標籤，然後在可變寬度的SVG圖形，以填充剩餘的空間，實際的圖形結果。下面的圖片顯示了我正在努力實現的目標。到目前爲止，我一直無法解決如何創建固定寬度和可變寬度區域。

任何與此有關的幫助將不勝感激！

非常感謝。

Answer 1

我就窩裏面你的主，像這樣一對夫婦SVG元素：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" > 

    <svg width="100"> 
     <rect x="0" y="0" width="100%" height="100%" fill="red" /> 
    </svg> 

    <svg x="100" > 
     <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/> 
    </svg> 

</svg> 

注意我所做的藍色SVG元素半透明的，所以你可以看到，沒有任何SVG紅色的是它背後。

我也建議使用viewBox讓您對您的繪畫更多的控制......

編輯：

OK，然後我要問你一個關於縱橫比的問題。如果你取一個正方形（寬度=高度）並從ONE一邊砍掉一個固定的部分，你不再有一個正方形，你必須考慮對你的圖表意味着什麼。

我相信這SVG將展示或多或少你想要什麼：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="600px" height="500px" viewBox="0 0 1200 1000"> 

<svg width="200"> 
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/> 
</svg> 

<svg x="200" width="1000" height="1000" viewBox="0 0 100 100"> 
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/> 
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/> 
    <rect x="10" y="10" width="70" height="40" fill="gray"/> 
</svg> 

注意的最SVG的縱橫比（AR）的尺寸MUST比賽中最viewBox「但是可以有不同的值。對於第二個SVG也是如此，但現在你正在處理的是一個真正的正方形而不是矩形的總片。您可以改變最外面的寬度和高度SVG，只要您保持相同的AR，內部的所有代碼都不必更改 - 它將全部按比例自動調整:)

還要注意不同尺度使用和我用於座標的不同值類型。因爲我的第二內SVG的viewBox設置用戶座標爲100×100，10％和10量同樣的事情...

你也可以設置preserveAspectRatio="none"或其他一些價值達到不同的效果，但對於一個圖我有點認爲排列起來很重要，所以我不會。

最後一個注意事項 - 您可以（並且在您的情況下應該）省略內部SVG上的viewBox。這樣，圖表的所有部分的比例都是一致的。我只是帶的viewBox :)

它只是發生在我身上，你可能更喜歡矩形爲正方形所以這裏斷電是一個代碼示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="800px" height="400px" viewBox="0 0 1600 800" > 

<svg width="200"> 
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/> 
</svg> 

<svg x="200" width="1400" height="800" viewBox="0 0 175 100" > 
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/> 
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/> 
    <rect x="10" y="10" width="70" height="40" fill="gray"/> 
</svg> 

注意內部SVG的寬度設置爲175，以保持1400/800的高寬比。