javascript - 带有rects的SVG溢出父div而不是缩放高度以尝试适应屏幕尺寸

Question

我正在尝试获取一个<svg>元素，该元素位于 a 内部，其中<div>包含大量<rect>要缩放高度和宽度的元素，以尝试自动适应用户的屏幕尺寸。我正在尝试复制Uptime Robot 的演示状态页面上显示的“时间线”图。

如果你缩放你的浏览器，你会发现他们的“时间线”图表几乎就像它保留了某种纵横比一样缩放。

在我的示例中，我正在使用 SVG 的宽度进行更新，就像 Uptime Robot 的一样，并且我一生都无法弄清楚如何让 SVG 改变它的高度，而不管矩形的数量如何。

无论屏幕大小如何，我的似乎都会“溢出”父级而不是缩放，我不知道为什么......

演示

function setUptimeTimelineWidth () {
  const wrapper = document.querySelector('[data-wrapper]')
  const svg = document.querySelector('svg')
  if (!wrapper) return
  svg.width = wrapper.offsetWidth
  svg.setAttribute('viewBox', `0 0 ${wrapper.offsetWidth} 30`);
}

window.addEventListener('resize', setUptimeTimelineWidth)
setUptimeTimelineWidth()

.uptime-timeline rect :hover {
  opacity: .65;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

<div data-wrapper>
   <svg height="30" version="1.1" viewbox="0 0 1036 30" width="1036" xmlns="http://www.w3.org/2000/svg" class="uptime-timeline">
      <rect title="<div class='text-muted small'>Apr 4th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 5th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="20.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 6th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="40.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 7th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="60.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 8th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="80.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 9th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="100.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 10th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="120.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 11th, 23:00</div>43.75%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="140.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 12th, 23:00</div>48.98%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="160.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 13th, 23:00</div>82.5%" aria-expanded="false" fill="#fbaa49" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="180.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 14th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="200.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 15th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="220.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 16th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="240.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 17th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="260.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 18th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="280.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 19th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="300.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 20th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="320.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 21st, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="340.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 22nd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="360.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 23rd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="380.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 24th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="400.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 25th, 23:00</div>100%" aria-expanded="false" fill="#1fc777" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="420.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 26th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="440.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 27th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="460.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 28th, 23:00</div>63.38%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="480.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 29th, 23:00</div>53.5%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="500.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 30th, 23:00</div>47.19%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="520.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 1st, 23:00</div>50.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="540.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 2nd, 23:00</div>51.21%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="560.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 3rd, 23:00</div>48.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="580.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 4th, 23:00</div>63.64%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="600.25" y="0"></rect>
   </svg>
</div>

这也是Codepen 的复制品！

标签： javascripthtmlcsssvg

Answer 1

如果将 svg 宽度设置为 100%，它将填充宽度并在调整大小时保持纵横比。

.uptime-timeline rect :hover {
  opacity: .65;
}

svg {
  overflow: hidden;
  vertical-align: middle;
  width: 100%;
  height: 30px;
}

div
{
  width: 100%;
  resize: both;
  overflow: auto;
  min-height: 30px;
  border: 1px solid black;
}

<div data-wrapper>
   <svg version="1.1" viewbox="0 0 1036 30" xmlns="http://www.w3.org/2000/svg" class="uptime-timeline">
      <rect title="<div class='text-muted small'>Apr 4th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 5th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="20.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 6th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="40.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 7th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="60.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 8th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="80.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 9th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="100.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 10th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="120.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 11th, 23:00</div>43.75%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="140.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 12th, 23:00</div>48.98%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="160.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 13th, 23:00</div>82.5%" aria-expanded="false" fill="#fbaa49" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="180.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 14th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="200.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 15th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="220.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 16th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="240.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 17th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="260.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 18th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="280.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 19th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="300.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 20th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="320.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 21st, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="340.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 22nd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="360.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 23rd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="380.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 24th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="400.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 25th, 23:00</div>100%" aria-expanded="false" fill="#1fc777" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="420.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 26th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="440.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 27th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="460.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 28th, 23:00</div>63.38%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="480.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 29th, 23:00</div>53.5%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="500.25" y="0"></rect>
      <rect title="<div class='text-muted small'>Apr 30th, 23:00</div>47.19%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="520.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 1st, 23:00</div>50.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="540.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 2nd, 23:00</div>51.21%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="560.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 3rd, 23:00</div>48.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="580.25" y="0"></rect>
      <rect title="<div class='text-muted small'>May 4th, 23:00</div>63.64%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="600.25" y="0"></rect>
   </svg>
</div>