文章/答案/技术大牛

发布

社区首页 >问答首页 >如何避免内联SVG在任意高度上显示而不给它(或其父)一个显式的高度？

问如何避免内联SVG在任意高度上显示而不给它(或其父)一个显式的高度？
EN

Stack Overflow用户

提问于 2018-08-08 20:50:20

回答 1查看 57关注 0票数 0

下面是一个使用Bootstrap 3的简化布局。行的中间列包含一个内联SVG，它提供了从蓝色框到绿色框的排序转换。

我为什么要这么做？用浏览器CSS设计SVG是很酷的！此外，这样做意味着我不必为每一个可能的行高和颜色组合生成一堆PNG，我可能会将这个设计元素应用到这些组合中。

虽然我可以使用JS来根据最高的不含SVG的div来动态地设置col-* div的高度，但是使用CSS似乎应该有一种方法来做到这一点。

请注意，我已经尝试为.row元素设置.row(它在样式表中被注释掉)。虽然它确实确保了列的高度相等，但它的效果是增加内容div而不是缩小样式div。

如果您像我一样，发现使用这个柱塞比使用一个StackOverflow片段要容易一些，那么就包括了这个a。

html, body.stackoverflow-snippet {
  color: white;
  font-size: 25px;
  height: 100%;
}

.row {
  /*
   * Ultimately I would use the following rule to ensure the columns are equal
   * height, since their content is dynamic, but the problem is less obvious
   * when this rule is in effect.
   */
  /* display: flex; */
}

.row.desired-result div {
  /*
   * To see the desired effect, set the height to any known value. In my case, I
   * can't set the height of the divs explicitly the because user-generated
   * content populates these divs and may change their height.
   */
  height: 35px;
}

.row .rounded {
  padding-left: 0;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

svg {
  height: 100%;
}

svg circle {
  fill: blue;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body class="stackoverflow-snippet">
  <div class="container-fluid">
    <!-- first row: desired result -->
    <div class="row desired-result">
      <div class="blue col-xs-6">Desired result</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(explicit height)</div>
    </div>
    <!-- second row: just a visual break to separate the rows of interest -->
    <div class="row">
      <div class="col-xs-12">&nbsp;</div>
    </div>
    <!-- third row: natural height -->
    <div class="row">
      <div class="blue col-xs-6">Ack!</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(natural height)</div>
    </div>
  </div>
</body>

</html>

css

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-09 10:57:12

制作SVG position: absolute。然后，"100%“高度将与其父容器测量。只要您还记得将父单元格设置为position: relative，就可以将其设置为适当的包含块。

.svg-container {
  position: relative;
}

.inline-svg {
  position: absolute;
  left: 0;
}

我们还在SVG单元中添加了一个不间断的空间，以阻止它在使SVG绝对化时崩溃到零高度。

.svg-container::before {
  content: '\a0'
}

结果：

html, body.stackoverflow-snippet {
  color: white;
  font-size: 25px;
  height: 100%;
}

.row {
  /*
   * Ultimately I would use the following rule to ensure the columns are equal
   * height, since their content is dynamic, but the problem is less obvious
   * when this rule is in effect.
   */
  /* display: flex; */
}

.row.desired-result div {
  /*
   * To see the desired effect, set the height to any known value. In my case, I
   * can't set the height of the divs explicitly the because user-generated
   * content populates these divs and may change their height.
   */
  height: 35px;
}

.row .rounded {
  padding-left: 0;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

svg {
  height: 100%;
}

svg circle {
  fill: blue;
}

.svg-container {
  position: relative;
}

.svg-container::before {
  content: '\a0'
}

.inline-svg {
  position: absolute;
  left: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body class="stackoverflow-snippet">
  <div class="container-fluid">
    <!-- first row: desired result -->
    <div class="row desired-result">
      <div class="blue col-xs-6">Desired result</div>
      <div class="green rounded col-xs-1">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5">(explicit height)</div>
    </div>
    <!-- second row: just a visual break to separate the rows of interest -->
    <div class="row">
      <div class="col-xs-12">&nbsp;</div>
    </div>
    <!-- third row: natural height -->
    <div class="row">
      <div class="blue col-xs-6">Ack!</div>
      <div class="green rounded col-xs-1 svg-container">
        <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
          <circle r="50" cy="50" cx="50"></circle>
        </svg>
      </div>
      <div class="green col-xs-5 svg-container">
        (natural height)</div>
    </div>
  </div>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51755453

复制

相似问题

问如何避免内联SVG在任意高度上显示而不给它(或其父)一个显式的高度？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免内联SVG在任意高度上显示而不给它(或其父)一个显式的高度？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免内联SVG在任意高度上显示而不给它(或其父)一个显式的高度？
EN