帮助缩放内联 SVG 图答案

【问题标题】：Assistance scaling an inline SVG graph帮助缩放内联 SVG 图
【发布时间】：2019-07-20 22:59:31
【问题描述】：

我有动态创建的 SVG 条形图（SQL 和 PHP）。目前，为了创建优化的尺寸，我为每个图表创建 3 个 SVG 图表，并使用带有媒体查询的 CSS 来根据设备显示正确的图表。

我显然更喜欢输出一个 SVG 图表并将其缩放到适用于每个设备的任何尺寸，这将使我的代码减少 3！

但每次我尝试使用 viewBox 或宽度/高度属性缩放我的内联代码时，我的图表要么显示被截断，要么根本不显示。

我希望我的 Code Pen 链接在这里可以正常工作：

<div class="wst_chart grstd">
  <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph grstd" aria-labelledby="Total US Yearling Sales" role="img">

    <g class="grid x-grid">
        <line x1="80" x2="80" y1="5" y2="406"></line>
        <line x1="800" x2="800" y1="5" y2="406"></line>
    </g>

    <g class="grid y-grid">
        <line x1="70" x2="800" y1="400" y2="400"></line>
    </g>
    <g class="grid y-grid2">
        <line x1="70" x2="800" y1="10" y2="10"></line>
        <line x1="70" x2="800" y1="54" y2="54"></line>
        <line x1="70" x2="800" y1="98" y2="98"></line>
        <line x1="70" x2="800" y1="142" y2="142"></line>
        <line x1="70" x2="800" y1="186" y2="186"></line>
        <line x1="70" x2="800" y1="230" y2="230"></line>
        <line x1="70" x2="800" y1="274" y2="274"></line>
        <line x1="70" x2="800" y1="318" y2="318"></line>
        <line x1="70" x2="800" y1="362" y2="362"></line>
    </g>
    <g class="labels y-labels">
        <text x="60" y="16">530</text>
        <text x="60" y="406">0</text>
    </g>

    <g class="labels label-title chartlabels">
        <text x="60" y="160" class="y-label1" transform="rotate(270, 60, 
        200)" >US $ in Millions</text>
    </g>
    <g class="grid x-grid2" id="xGrid2">
        <line x1="200" x2="200" y1="400" y2="411"></line>
        <line x1="320" x2="320" y1="400" y2="411"></line>
        <line x1="440" x2="440" y1="400" y2="411"></line>
        <line x1="560" x2="560" y1="400" y2="411"></line>
        <line x1="680" x2="680" y1="400" y2="411"></line>
    </g>

    <g class="labels x-labels">
        <text x="140" y="424">2013</text>
    </g>
    <g class="bar">
        <rect x="110" y="-10" width="64" height="285.76021132075" 
        transform="scale(1,-1) translate(0,-390)">
        <animate attributeName="height" from="-10" to="285.76021132075" 
        dur="0.5s" fill="freeze" />
        </rect>
    </g>

    <g class="labels x-labels">
        <text x="260" y="424">2014</text>
    </g>
    <g class="bar">
        <rect x="230" y="-10" width="64" height="287.41336981132" 
        transform="scale(1,-1) translate(0,-390)">
        <animate attributeName="height" from="-10" to="287.41336981132" 
        dur="0.5s" fill="freeze" />
        </rect>
    </g>

    <g class="labels x-labels">
        <text x="380" y="424">2015</text>
    </g>
    <g class="bar">
        <rect x="350" y="-10" width="64" height="299.57062641509" 
        transform="scale(1,-1) translate(0,-390)">
        <animate attributeName="height" from="-10" to="299.57062641509" 
        dur="0.5s" fill="freeze" />
        </rect>
    </g>

    <g class="labels x-labels">
        <text x="500" y="424">2016</text>
    </g>
    <g class="bar">
        <rect x="470" y="-10" width="64" height="282.86670566038" 
        transform="scale(1,-1) translate(0,-390)">
        <animate attributeName="height" from="-10" to="282.86670566038" 
        dur="0.5s" fill="freeze" />
        </rect>
    </g>

    <g class="labels x-labels">
        <text x="620" y="424">2017</text>
    </g>
    <g class="bar">
        <rect x="590" y="-10" width="64" height="323.23185283019" 
        transform="scale(1,-1) translate(0,-390)">
        <animate attributeName="height" from="-10" to="323.23185283019" 
        dur="0.5s" fill="freeze" />
        </rect>
    </g>

    <g class="labels x-labels">
        <text x="740" y="424">2018</text>
    </g>
    <g class="bar">
        <rect x="710" y="-10" width="64" height="384.99839716981" 
        transform="scale(1,-1) translate(0,-390)">
        <animate attributeName="height" from="-10" to="384.99839716981" 
        dur="0.5s" fill="freeze" />
        </rect>
    </g>
    <g class="labels x-labels">
        <text x="440" y="448" class="label-title x-label">YEAR</text>
    </g>

  </svg>
</div>

非常感谢任何建议或帮助！

【问题讨论】：

标签： html css svg

【解决方案1】：

首先，修改样式

.grstd {
  height: auto;
  width: 100%;
  max-width: 880px;
}

而 svg 您只需添加 viewBox="0 0 880 470" 当然，在头部应该找到这个代码<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则页面不会缩放。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    .wst_chart {
      text-align: center;
      background-color: white;
      border: 1px solid darkgray;

      margin: 2% auto 2% auto;
      padding-bottom: 0%;
    }

    .grstd {
      height: auto;
      width: 100%;
      max-width: 880px;
    }

    graph {
      font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
      padding: 1% 0 1% 0;
    }

    .graph .grid {
      stroke: #cccccc;
      stroke-dasharray: 0;
      stroke-width: 1;
    }

    .graph .x-grid,
    .graph .y-grid {
      stroke: black;
      stroke-width: 2;
    }

    .labels {
      font-size: 13px;
    }

    .label-title {
      font-weight: bold;
      font-size: 12px;
      fill: black;
    }

    .graph .labels.x-labels {
      text-anchor: middle;
    }

    .graph .labels.y-labels {
      text-anchor: end;
    }

    .graph .y-label1 {
      text-anchor: middle;
    }

    .graph .line {
      fill: none;
      stroke-width: 3;

      transition: 0.5s;
    }

    .graph .line2 {
      fill: none;
      stroke-width: 3;
      stroke-dasharray: 5;
    }

    .graph .bar {
      fill: darkred;
    }

    .graph .bar:hover,
    .graph .bar:focus,
    .graph .bar:hover text,
    .graph.bar:focus text {
      fill: #29497a;
    }

    .graph .bar text {
      visibility: hidden;
    }

    .graph .bar:hover text,
    .graph .bar:focus text {
      visibility: visible;
    }
  </style>

</head>

<body>
  <div class="wst_chart grstd">

    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph grstd"
      aria-labelledby="Total US Yearling Sales" role="img" viewBox="0 0 880 470">

      <g class="grid x-grid">

        <line x1="80" x2="80" y1="5" y2="406"></line>
        <line x1="800" x2="800" y1="5" y2="406"></line>
      </g>
      <g class="grid y-grid">
        <line x1="70" x2="800" y1="400" y2="400"></line>
      </g>
      <g class="grid y-grid2">
        <line x1="70" x2="800" y1="10" y2="10"></line>
        <line x1="70" x2="800" y1="54" y2="54"></line>
        <line x1="70" x2="800" y1="98" y2="98"></line>
        <line x1="70" x2="800" y1="142" y2="142"></line>
        <line x1="70" x2="800" y1="186" y2="186"></line>
        <line x1="70" x2="800" y1="230" y2="230"></line>
        <line x1="70" x2="800" y1="274" y2="274"></line>
        <line x1="70" x2="800" y1="318" y2="318"></line>
        <line x1="70" x2="800" y1="362" y2="362"></line>
      </g>
      <g class="labels y-labels">
        <text x="60" y="16">530</text>
        <text x="60" y="406">0</text>
      </g>

      <g class="labels label-title chartlabels">
        <text x="60" y="160" class="y-label1" transform="rotate(270, 60, 200)">US $ in Millions</text>
      </g>
      <g class="grid x-grid2" id="xGrid2">
        <line x1="200" x2="200" y1="400" y2="411"></line>
        <line x1="320" x2="320" y1="400" y2="411"></line>
        <line x1="440" x2="440" y1="400" y2="411"></line>
        <line x1="560" x2="560" y1="400" y2="411"></line>
        <line x1="680" x2="680" y1="400" y2="411"></line>
      </g>

      <g class="labels x-labels">
        <text x="140" y="424">2013</text>
      </g>
      <g class="bar">
        <rect x="110" y="-10" width="64" height="285.76021132075" transform="scale(1,-1) translate(0,-390)">
          <animate attributeName="height" from="-10" to="285.76021132075" dur="0.5s" fill="freeze" />
        </rect>
      </g>

      <g class="labels x-labels">
        <text x="260" y="424">2014</text>
      </g>
      <g class="bar">
        <rect x="230" y="-10" width="64" height="287.41336981132" transform="scale(1,-1) translate(0,-390)">
          <animate attributeName="height" from="-10" to="287.41336981132" dur="0.5s" fill="freeze" />
        </rect>
      </g>

      <g class="labels x-labels">
        <text x="380" y="424">2015</text>
      </g>
      <g class="bar">
        <rect x="350" y="-10" width="64" height="299.57062641509" transform="scale(1,-1) translate(0,-390)">
          <animate attributeName="height" from="-10" to="299.57062641509" dur="0.5s" fill="freeze" />
        </rect>
      </g>

      <g class="labels x-labels">
        <text x="500" y="424">2016</text>
      </g>
      <g class="bar">
        <rect x="470" y="-10" width="64" height="282.86670566038" transform="scale(1,-1) translate(0,-390)">
          <animate attributeName="height" from="-10" to="282.86670566038" dur="0.5s" fill="freeze" />
        </rect>
      </g>

      <g class="labels x-labels">
        <text x="620" y="424">2017</text>
      </g>
      <g class="bar">
        <rect x="590" y="-10" width="64" height="323.23185283019" transform="scale(1,-1) translate(0,-390)">
          <animate attributeName="height" from="-10" to="323.23185283019" dur="0.5s" fill="freeze" />
        </rect>
      </g>

      <g class="labels x-labels">
        <text x="740" y="424">2018</text>
      </g>
      <g class="bar">
        <rect x="710" y="-10" width="64" height="384.99839716981" transform="scale(1,-1) translate(0,-390)">
          <animate attributeName="height" from="-10" to="384.99839716981" dur="0.5s" fill="freeze" />
        </rect>
      </g>
      <g class="labels x-labels">
        <text x="440" y="448" class="label-title x-label">YEAR</text>
      </g>
    </svg>
  </div>
</body>

</html>

【讨论】：

非常感谢您花时间浏览我的所有代码。我希望答案会相对简单，并且凭借一些专业知识，确实如此。我可以向您保证，必要的视口代码始终在我的中。修改 CSS，我可以用媒体查询来做，同时保持视口值正是我需要的。我现在可以完全基于我的 CSS 中的媒体查询输出一个具有 3 种不同大小的图形。非常感谢您的解决方案、耐心和解释。非常感谢。