[英]Inline SVG won't scale correctly in Angular Material dialog
我一直在尝试在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以全视图显示,但全部以受限视图显示(这是所需的行为)
只需将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
我最终以编程方式解决了这个问题。 我遵循了camden_kid的建议,在svg-wrapper
中添加了flex layout="column"
。 然后,在指令中,我将以下内容添加到SVG的样式中:
width: auto
height: element[0].clientHeight
margin: auto
设置高度等于clientHeight不允许垂直拉伸,除非您以编程方式关注它,但这解决了所有其他问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.