css - 转换后如何使内联 SVG 适合它的容器？

Question

当视口(viewport)小于 600 像素时，我正在尝试旋转用 SVG 制作的图形。我使用了一个媒体查询，它工作得很好，但是 svg 从它的容器中溢出，无论我做什么，我都无法修复它。

是否可以在没有 javascript 的情况下修复它？

我尝试使用 preserveAspectRatio 属性和 viewbox 属性，但它不起作用。

这是代码:https://codepen.io/telumire-the-sasster/pen/vYBxLRg

HTML:

<div class="container">

  <svg viewBox="0 0 700 100" preserveAspectRatio="none" class="graphic" style="">
              <polyline fill="red" stroke="none"
                    points="
                            0,0
                            0,15
                            100,14
                            200,18
                            300,21
                            400,23
                            500,22
                            600,17
                            700,17
                            700,0
                            0,0
                            "/>
              </svg>
</div>

CSS:

    .container {
  background-color: green;
}
.graphic {
  transform: scaleY(-1);
}

@media (max-width: 599px) {
  /* smartphone */
  .graphic {
    transform: rotate(90deg);
    height: 100%;
    display: block;
  }
}

我希望 svg 不会从绿色容器溢出(它必须适合它的高度)。

Answer 1

您的 svg 的高度不会超过容器的高度。问题是你将你的 svg 旋转 90 度，这样视觉上它的宽度就变成了它的高度，但这只是视觉上的，因为它仍然被算作宽度。

编辑:添加了一个 jQuery 解决方案。使用此设置，如果视口(viewport)小于 600，您的 svg 将像以前一样旋转，但 JavaScript 会将高度值替换为宽度值，将宽度值替换为高度值。这是代码:

$(window).resize(function() {
  if ($(window).width() <= 600) {
    var h = $('#svg').height();
    var w = $('#svg').width();
    $('#svg').attr('width', h);
    $('#svg').attr('height', w);
  }
});

.container {
  background-color: green;
}

.graphic {
  transform: scaleY(-1);
}

@media (max-width: 599px) {

  /* smartphone */
  .container {
    height: 200px;
  }

  .graphic {
    transform: rotate(90deg);
    height: 100%;
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <svg viewBox="0 0 700 100" preserveAspectRatio="none" class="graphic" style="" id="svg">
    <polyline fill="red" stroke="none" points="
                            0,0
                            0,15
                            100,14
                            200,18
                            300,21
                            400,23
                            500,22
                            600,17
                            700,17
                            700,0
                            0,0
                            " />
  </svg>
</div>

其他选择是放置 2 个 svg(一个垂直对齐，一个水平对齐)并且一次只显示其中一个。