从样式表定位内联 SVG

Posted 2023-03-06

【中文标题】从样式表定位内联 SVG

【英文标题】：Targeting Inline SVG from stylesheet

【发布时间】：2015-09-11 17:46:52

【问题描述】：

我很惊讶遇到这个问题，但我还没有完全理解 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 样式块不是选项。每个 SVG 都位于一个容器“svg-container”中。

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

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

注意：里面的箭头调整到最大高度 150px，然而，SVG 失去了它的纵横比，正如你从边框看到的那样。

【问题讨论】：

你打赌，我在上面添加了一个 CodePen。

箭头确实保持了所需的纵横比，但是，正如你所说，SVG 本身没有，这就是我想要实现的 - 我希望整个 SVG 调整到最大-150px的高度（宽度：自动）

你想要两个不兼容的东西，如果你想让 SVG 占据一个不同纵横比的盒子，那么两个边缘需要有间隙，或者纵横比需要更改为与容器相同。没有第三种方法。

@PaulIsLoud：我不知道这是否有帮助，但据我了解，this 是您最好的选择。我同意罗伯特上面的评论。

@PaulIsLoud：My last try。我认为这可以满足您的需求。如果没有，请随时加入我this chat room。

【参考方案1】：

诀窍是在.svg-container 上设置height。这意味着 SVG 元素的 height 是 25vw（视口宽度单位）但最大不超过 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>