按比例縮放在IE 11+

嵌入式內按比例縮放在IE 11+

在當前項目中，我有一個代表現實世界的水灌溉控制器的面板爲.png。 SVG作用覆蓋層，幷包含所有可按下按鈕和虛擬LED的座標，這些按鈕在真實世界設備上需要時閃爍，與正在與「真實」水控制器通話的節點應用程序進行交互，而.png是嵌入式背景圖。（請參閱下面的代碼）我們以編程方式（通過Javascript）更改覆蓋SVG和麪板圖像進入頁面，這取決於以前的用戶輸入。

一切都很正常，我們可以在SVG覆蓋按下按鈕和現實世界控制器響應，反之亦然。

問題歸結爲縮放嵌入式圖像。在Chrome，Firefox和Opera下，我可以將瀏覽器窗口調整爲各種大小，並且SVG和嵌入式圖像可以很好地縮放。

但IE 11+拒絕打球，固執地保持嵌入圖像在縮小尺寸。

我認爲我已經搜索了關於在IE中縮放SVG的主題，並嘗試過各種CSS hacks和DOM操作，儘管似乎很適用於將SVG嵌入到HTML img標記中，而不是帶有嵌入式圖像標籤的SVG。

我試圖刪除從CSS-僅SVG和使用所有的寬/高;我試過在圖像標籤中使用100％寬度/高度（據推測）允許viewBox控制它的尺寸;我試着將寬度/高度固定爲相同的viewBox值;我試過在SVG頭和圖像中使用preseveAspectRatio。我正在用盡想法。

相關的代碼示例：

<svg class="scaling-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 530" preserveAspectRatio="xMidYMid meet" > 

    <image id="faceplate" xlink:href="../images/TWC-front.jpg" class="svg-content" height="530" width="970" preserveAspectRatio="xMidYMid meet"></image> 

    <g> 
    <rect id="rect_textDisplay" x="322" y="157" width="530" height="52" opacity="0" /> 
    <text fill="black" x="326" y="176" id="displine1" xml:space="preserve">Welcome to the Virtual Controller</text> 
    <text fill="black" x="326" y="198" id="displine2" xml:space="preserve"> ... waiting for connection</text> 
    </g> 

    <rect id="dial_irroff" x="39" y="319" opacity="0" width="75" height="25" /> 
    <rect id="dial_manual" x="63" y="287" opacity="0" width="80" height="25" /> 
    <rect id="dial_auto" x="148" y="278" opacity="0" width="50" height="25" /> 
...

任何想法或者我可能沒有考慮方向打回原形是極大的讚賞。我希望儘可能保持當前形式的解決方案，因爲我們根據用戶輸入動態更改面板，並且在兩個SVG疊加層之間將使用大約15個不同的面板。在純SVG中重新構建每個面板需要相當多的時間。但如果有必要，我準備好了。 :(

來源

2017-05-18 the digitalmouse

放下IE支持並讓它們使用Edge。問題解決了。 – Mardoxx

嘗試在根svg元素上給圖像一個明確的寬度/高度，即width =「100％」height =「100％」。 –

將100％高度應用於html，body和svg元素。如果它仍然無法使用現代瀏覽器的100vh高度和IE的固定高度。 – llobet

用戶llobet的上面給html，body和svg元素增加了100％高度的評論似乎是做了一個竅門。最初，我採用了用戶Mardoxx所要求的codepen工作並將其應用於我的CSS，仍然沒有奏效。修剪掉所有，但最基本的CSS規則的幾分鐘後和發現一對夫婦的height: auto;，屬性和刪除它們或讓他們100％，那麼IE11開始玩好和縮放預期。這支付剔除和scruntinize您的CSS，直到事情表現如預期。感謝你們兩個在正確的方向推動。

相關codepen.io：http://codepen.io/digitalmouse/pen/LygOWe

來源

2017-05-19 06:49:18

按比例縮放在IE 11+

回答

相關問題