Question

我想将具有多边形形状的SVG缩放到容器的整个高度。将SVG的高度设置为100％无效。

相关的jsFiddle：https://jsfiddle.net/12yktprj/

以下一行给我带来了麻烦：

aside svg {
    height: 100%; /* somehow not working */
    width: 100%;  /* somehow not working */
}

Answer 1

svg元素需要具有SIGV4_SIGNATURE_GOES_HERE属性，并且没有宽度和高度。对于viewBox属性，我使用多边形的大小。

在这种情况下（viewBox-默认值），而不是声明flex项目的flex-direction:row，而是声明[flex属性]

旁边有width，而svg有position:relative;并溢出position:absolute;。我希望这就是你的要求。

（https://developer.mozilla.org/en-US/docs/Web/CSS/flex）

aside

*{padding:0,margin:0}
body {
  height: 300px;
  width: 900px;
  border: 3px solid green;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position:relative;
  background:#ddd;
}

aside {
  position:relative;
  flex: 1 1 25%;
  height: 100%;
  border: 1px solid blue;
}

aside svg {
  position:absolute;
  height:100%
}

article {
  border: 2px solid orange;
  flex: 1 1 75%;
  height: 100%;
  padding: 2px;
}

如何将填充了图像的多边形svg缩放到容器的高度？

1 个答案: