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

【问题标题】：How to scale a polygon svg with an image fill to the container's height?如何将带有图像填充的多边形 svg 缩放到容器的高度？
【发布时间】：2019-03-25 21:22:10
【问题描述】：

我想将具有多边形形状的 SVG 缩放到容器的整个高度。将 SVG 的高度设置为 100% 不起作用。

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

以下行给我带来了麻烦：

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

【问题讨论】：

标签： html css svg image-scaling

【解决方案1】：

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

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

侧面有position:relative;，svg 有position:absolute;，溢出aside。我希望这就是你要问的。

(https://developer.mozilla.org/en-US/docs/Web/CSS/flex)

*{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;
}

<body>
  <aside>
    <svg viewBox="0 0 100 100">
      <defs>
          <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
              <image height="1" preserveAspectRatio="slice" xlink:href="https://i.imgur.com/8OtgM8B.jpg" />
          </pattern>
      </defs>
      <polygon fill="url(#pattern1)" points="0,0 70,0 100,100 0,100"/>
    </svg>
  </aside>
  <article>
    <h1>Title</h1>
    <p>Sample Text</p>
  </article>
</body>

【讨论】：