響應式SVG無法正常工作？

我在製作SVG響應時遇到了麻煩。我已經嘗試瞭解決此問題的解決方案（Resize svg when window is resized in d3.js），但它不適用於我。無論設置如何，SVG似乎都保持其寬高比。（我發佈在earlier。我會在解決問題後刪除該問題）。響應式SVG無法正常工作？

上下文：這是一個全屏D3時間線作爲Electron桌面應用程序運行。爲了提供這個問題的一個工作示例，我已經剝離了所有內容。下面的圖片來自Electron應用程序，但瀏覽器中的行爲是相同的：SVG只能按比例縮放，如果窗口的縱橫比與SVG的縱橫比不匹配，則會裁剪。

我想要發生的事情：理想情況下，我希望「flex space」處於垂直方向，以便SVG的大小適合窗口的寬度和高度。

這裏是一個working, editable bl.ock和same block full page

我還在學習JS和d3 - 以及加入CSS的處理響應性變得非常混亂，所以任何的幫助深表感謝。

1024×768的窗口大小

1400 X 900屏幕尺寸：SVG裁剪

來源

2017-07-10 No Grabbing

那麼你可以使用

preserveAspectRatio="none"

但我懷疑這可能不是你想要的，因爲它會拉伸SVG的內容。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.svg-container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #ffff00; 
 
} 
 

 
.svg-content-responsive { 
 
    display: block; 
 
    background-color: #0000ff; 
 
}

<div id="container" class="svg-container"> 
 

 
    <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 984 728" 
 
     class="svg-content-responsive" overflow="hidden"> 
 
    <rect x="20" y="20" width="944" height="50" style="fill: rgb(255, 0, 0);"></rect> 
 
    <rect x="20" y="658" width="944" height="50" style="fill: rgb(0, 255, 0);"></rect> 
 
    </svg> 
 
    
 
</div>

Fiddle version

SVGs不能從父規模不同的部分。所以如果你不喜歡拉伸，那麼你應該考慮使用三個單獨的SVG--紅色，綠色和縮放的時間線來填充它們之間的部分。

來源

2017-07-10 20:21:14

響應式SVG無法正常工作？

回答

相關問題