从样式表中定位内联SVG

Question

我对遇到这个问题感到很惊讶，但我必须对SVG + CSS有一些乐趣，但我并没有这么做。

简短版，这不起作用：

HTML

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

样式表中的CSS

.mybox { max-height: 150px; }

长版

我有一些SVG＆＃34;小部件＆＃34;，一些是2：1宽度：高度比，有些是1：1宽度：高度，并且需要灵活性以及之外的任何东西。

＆＃34;小部件＆＃34;将在画廊中展示，每个项目的宽度为318px，高度为150px。

但是，图库并不是这些＆＃34;小部件＆＃34;的唯一（甚至主要）显示，它们将在别处使用，并且需要扩展，因此添加最大高度的内联SVG样式块：150px不是一个选项。每个SVG都坐在一个容器中，＆＃39; svg-container＆＃39;。

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

这是一个CodePen（是的，这是丑陋的，概念证明）

注意：里面的箭头调整到150px的最大高度，然而，SVG会失去其宽高比，正如您从边框中看到的那样。

Answer 1

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

容器上的text-align: center（正如您猜测的那样）是将SVG元素水平居中放置在容器中。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;