Javascript 内联SVG赢得'；t在“角度材质”对话框中正确缩放

我一直在尝试在Angular material对话框中实现一个SVG文档标记编辑器，其中屏幕在实际的SVG元素（左侧）和艺术控件（右侧）之间分割

问题是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>

其余部分由默认角度材质css规则处理

概述：svg包装器是获取用户将在其上绘制草图的文档的指令。它将svg编译到页面上。无论选择何种选项，添加PreserveSpectratio都无效

如果有人对正在发生的事情有更好的理解，我会很感激对正在发生的事情的一些解释，更重要的是如何解决它

编辑：使用Plunkr更新。如果以不同的宽度拉伸代码部分，您将看到部分pdf显示在全视图中，但所有pdf显示在约束视图中（这是所需的行为）

---

只需将

flex layout=“column”

添加到

svg包装中

-

加价

<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>

这里有一些艺术选项

---

作为建议，将

flex

添加到Art选项中也会很好-

我最终通过编程解决了这个问题。我遵循了camden_kid的建议，将

flex layout=“column”

添加到

svg包装器中。然后，在指令中，我在SVG的样式中添加了以下内容：

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

将高度设置为clientHeight不允许垂直拉伸，除非您以编程方式关注它，但它解决了所有其他问题。
此解决方案的问题是，它最终将屏幕分割为50/50，并因此拉伸SVG。我希望保持原始文件的纵横比，因此左侧只需拉伸以适应SVG。不幸的是，这个解决方案没有做到这一点。
width: auto
height: element[0].clientHeight
margin: auto