logo标签列表

协助扩展内联SVG图表

htmlcsssvg
3

我正在动态创建SVG条形图（使用SQL和PHP），为了创建优化大小的图表，每个图表我会创建3个SVG图表，并使用CSS媒体查询来显示适合设备的图表。

显然，我希望输出一个SVG图表，并按比例缩放以适应每个设备的大小，这样可以减少我的代码量三分之一！

但是，每次尝试使用viewBox或width/height属性缩放我的内联代码时，我的图表要么被裁剪掉，要么根本无法显示。

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

https://codepen.io/DerekErb/pen/VowVaM

<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>

任何建议或帮助将不胜感激！

1个回答
3

首先，修改样式

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

要使用 SVG，只需添加 viewBox="0 0 880 470"。当然，在 head 中应该包含以下代码：<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>

1
非常感谢您抽出时间查看我的所有代码。我希望答案相对简单，并且通过一些专业知识，确实如此。我可以向您保证，必要的视口代码始终在我的<head>中。通过媒体查询修改CSS，同时保持视口值正是我所需要的。现在，我可以仅基于CSS中的媒体查询输出一个图形，具有3种不同的大小。非常感谢您的解决方案、耐心和解释。非常感激。 - Derek Erb
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接