css - 从样式表定位内联 SVG

Question

我很惊讶遇到这个问题，但是 SVG + CSS 一定有一些我不太明白的有趣之处。

简短版本，这不起作用:

HTML

<div class="svg-container>
    <svg class="mybox">...</svg>
</div>

样式表中的 CSS

.mybox { max-height: 150px; }

长版

我有一些 SVG“小部件”，其中一些宽高比为 2:1，另一些宽高比为 1:1，并且需要介于两者之间和之外的任何灵活性。

“小部件”将显示在图库中，每个元素的宽度为 318 像素，高度为 150 像素。

但是，图库并不是这些“小部件”的唯一(甚至主要)展示，它们将在其他地方使用，并且需要缩放，因此添加 max-height: 150px 的内联 SVG 样式 block 并不是一个好的选择。选项。每个 SVG 都位于一个容器“svg-container”中。

重复:内联 SVG 样式不是一个选项。 SVG 本身可能必须是内联的，因为我们将数据传递到 SVG，因此不能选择将 SVG 作为图像等链接。

这是一个CodePen (是的，它很丑陋，概念证明)

注意:内部箭头的大小调整为最大高度 150 像素，但是，SVG 会丢失其纵横比，正如您从边框中看到的那样。

Answer 1

诀窍是在 .svg-container 上设置高度。这意味着 SVG 元素的高度为25vw(视口(viewport)宽度单位)，但最大不超过150px。由于现在元素的高度已知，因此宽度是根据 SVG 上指定的 viewBox 设置的。实际值(本例中为25vw)只是一个随机值，可以根据需要进行修改。

容器上的 text-align: center (正如您可能已经猜到的那样)是将 SVG 元素在容器内水平居中。

.svg-container {
  text-align: center;
  height: 25vw;
  /* This is the key. I have used vw units for responsiveness */
  margin-bottom: 10px;
  border: 1px solid;
}
.mybox {
  max-height: 150px;
  height: 100%;
}

<div class="svg-container">
  <svg class="mybox" style="border: solid" x="0" y="0" viewBox="0, 0, 500, 500">
    <polygon fill="orange" points="256,512 512,256 352,256 352,0.001 160,0 160,256 0,256 "></polygon>
    <text text-anchor="middle" x="250" y="250" style="font-size: 100px;" stroke="black" fill="black">000</text>
  </svg>
</div>

<div class="svg-container">
  <svg class="mybox" style="border: solid" x="0" y="0" viewBox="0, 0, 250, 500">
    <polygon fill="orange" points="128,512 256,256 176,256 176,0.001 80,0 80,256 0,256 "></polygon>
    <text text-anchor="middle" x="125" y="250" style="font-size: 50px;" stroke="black" fill="black">000</text>
  </svg>
</div>