内联 SVG 在 Angular Material 对话框中无法正确缩放

Question

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

问题在于 SVG 必须保持其自身的宽高比，而不是拉伸以填充 space。理想情况下，它也应该位于屏幕中央。

以下是理想结果的草图：

*-------------------*--------------------------*
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |                          |
|                   |         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-Materialcss规则处理

一些概述：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>

作为建议，将 flex 添加到艺术选项中也不错 - Plunker

Answer 2

我最终以编程方式解决了这个问题。我听从了 camden_kid 的建议，将 flex layout="column" 添加到 svg-wrapper。然后，在指令中，我将以下内容添加到 SVG 的样式中：

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

设置高度等于 clientHeight 不允许垂直拉伸，除非您以编程方式关注它，但它解决了所有其他问题。

内联 SVG 在 Angular Material 对话框中无法正确缩放

Inline SVG won't scale correctly in Angular Material dialog

html

javascript

css

svg

angular-material