內聯SVG在“角度材質”對話框中無法正確縮放

Question

我一直在嘗試在Angular材質對話框中實現SVG文檔標記編輯器，在該屏幕中，實際的SVG元素（左側）和art控件（右側）之間被分割。

問題在於SVG必須保持其自身的縱橫比，而不是拉伸以填充空間。 理想情況下，它也應位於屏幕中央。

以下是理想結果的示意圖：

*-------------------*--------------------------*
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |         Art              |
|      SVG          |       Options            |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
*-------------------*--------------------------*

這是正在發生的事情：

*-------------------*--------------------------*
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |         Art              |
|      SVG          |       Options            |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
*-------------------*--------------------------*
|                   |
|    Overflow       |
|                   |
*-------------------*

這是對話框的代碼：

<md-dialog>
    <md-dialog-content flex layout="row">
        <div class="pdf-wrap" flex layout="column" layout-align="center center">
            <svg-wrapper></svg-wrapper>
        </div>
        <md-divider></md-divider>
        <div class="md-padding" layout="column">
            <art-options></art-options>
        </div>
    </md-dialog-content>
</md-dialog>

存在的唯一額外樣式是：

pdf-wrap {
    padding: 10px;
}
svg-wrapper {
    width: 100%;
}

其余部分由默認的Angular-Material css規則處理。

一些概述：svg-wrapper是用於提取用戶將在其上進行素描的文檔的指令。 它將svg編譯到頁面上。 無論選擇什么選項，添加preserveAspectRatio均無效。

如果有人對正在發生的事情有更好的了解，我希望對正在發生的事情進行一些解釋，更重要的是如何解決它。

編輯：用Plunkr更新。 如果以不同的寬度拉伸代碼部分，則會看到部分pdf以全視圖顯示，但全部以受限視圖顯示（這是所需的行為）

https://plnkr.co/edit/Or10mAmBrlDsqcKAS6BZ?p=info

Answer 1

只需將flex layout="column"添加到svg-wrapper - Plunker

標記

<md-dialog>
  <md-dialog-content flex layout="row">
    <div class="pdf-wrap" flex layout="column" layout-align="center center"  style="background:yellow">
      <svg-wrapper flex layout="column"></svg-wrapper>
    </div>
    <div class="md-padding" layout="column" style="background:red">
      <h2>Some art options here</h2>
    </div>
  </md-dialog-content>
</md-dialog>

作為建議，在art選項中添加flex也將很好-Plunker

Answer 2

我最終以編程方式解決了這個問題。 我遵循了camden_kid的建議，在svg-wrapper中添加了flex layout="column" 。 然后，在指令中，我將以下內容添加到SVG的樣式中：

width: auto
height: element[0].clientHeight
margin: auto

設置高度等於clientHeight不允許垂直拉伸，除非您以編程方式關注它，但這解決了所有其他問題。