Question

我有一个使用php和数据库中的一些数据生成的SVG图（复杂一点）。在那种情况下，我无法预测svg和任何东西上的标签长度。图表是动态生成的，数据始终是未知的。这就是为什么，我从这开始：

<svg class="chart" id="chart1" viewBox="0 0 1000 1000">

我正在设置巨大的viewbox（1000,1000），我开始在这个视图框的中间某处生成SVG。之后，有些元素有时靠近左边，另一个元素靠近顶部，例如在底部我有200个空白矩形。

有没有选择在SVG中自动切换空白以匹配内容？我有一种直觉，认为我的想法不好，我缺少某些东西或做了一些非常错误的事情。

让我们说这可以是最终产品（版权维基百科）的一个例子： http://upload.wikimedia.org/wikipedia/commons/f/f4/Wiggers_Diagram.svg

我没有在这里添加任何进一步的代码，因为它没有意义SVG生成功能真的是巨大而复杂的，而问题对应于最终结果。

任何解决方案或想法都将被理解，问题对应于html5和svg（标签），但解决方案也可以是javascript或css（如果存在）。

更新：我被要求进行真正的演示（最小化）：

.chart {
  overflow: auto;
  position: relative;
  border: 1px solid #ccc;
  width: 500px;
  background: #fff;
}
.chart .point {
  stroke: #555;
  stroke-width: 10;
  fill: #000;
}
.chart .plot {
  stroke: #aaa;
  stroke-width: 2;
}
.chart .popup {
  fill: #000;
  font-family: sans-serif;
}
.chart .axis {
  stroke: #aaa;
  stroke-width: 1;
}
.chart .grid {
  stroke: #ccc;
  stroke-width: 1;
}
.chart .legend {
  fill: black;
  font-family: sans-serif;
}
.region:hover .popup {
  visibility: visible;
}

<svg class="chart" id="chart" viewBox="0 0 1000 500">
  <line x1="110" y1="300" x2="1000" y2="300" class="grid" />
  <text x="110" y="300" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">0</text>
  <line x1="110" y1="240" x2="1000" y2="240" class="grid" />
  <text x="110" y="240" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">1</text>
  <line x1="110" y1="180" x2="1000" y2="180" class="grid" />
  <text x="110" y="180" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">2</text>
  <line x1="110" y1="120" x2="1000" y2="120" class="grid" />
  <text x="110" y="120" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">3</text>
  <line x1="130" y1="0" x2="130" y2="300" class="axis" />
  <line x1="130" y1="300" x2="1000" y2="300" class="axis" />
  <line x1="227" y1="300" x2="323" y2="300" class="plot" />
  <line x1="323" y1="300" x2="420" y2="300" class="plot" />
  <line x1="420" y1="300" x2="517" y2="300" class="plot" />
  <line x1="517" y1="300" x2="613" y2="300" class="plot" />
  <line x1="613" y1="300" x2="710" y2="60" class="plot" />
  <line x1="710" y1="60" x2="807" y2="300" class="plot" />
  <line x1="807" y1="300" x2="903" y2="300" class="plot" />
  <g class="region" id="chart_point_0">
    <rect x="178.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="227" cy="300" class="point" r="5" />
    <text x="227" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 227,320)">2014-05-04</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="227" y="280" font-size="30" visibility="hidden">0</text>
  </g>
  <g class="region" id="chart_point_1">
    <rect x="274.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="323" cy="300" class="point" r="5" />
    <text x="323" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 323,320)">2014-05-05</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="323" y="280" font-size="30" visibility="hidden">0</text>
  </g>
  <g class="region" id="chart_point_2">
    <rect x="371.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="420" cy="300" class="point" r="5" />
    <text x="420" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 420,320)">2014-05-06</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="420" y="280" font-size="30" visibility="hidden">0</text>
  </g>
  <g class="region" id="chart_point_3">
    <rect x="468.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="517" cy="300" class="point" r="5" />
    <text x="517" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 517,320)">2014-05-07</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="517" y="280" font-size="30" visibility="hidden">0</text>
  </g>
  <g class="region" id="chart_point_4">
    <rect x="564.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="613" cy="300" class="point" r="5" />
    <text x="613" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 613,320)">2014-05-08</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="613" y="280" font-size="30" visibility="hidden">0</text>
  </g>
  <g class="region" id="chart_point_5">
    <rect x="661.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="710" cy="60" class="point" r="5" />
    <text x="710" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 710,320)">2014-05-09</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="710" y="40" font-size="30" visibility="hidden">4</text>
  </g>
  <g class="region" id="chart_point_6">
    <rect x="758.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="807" cy="300" class="point" r="5" />
    <text x="807" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 807,320)">2014-05-10</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="807" y="280" font-size="30" visibility="hidden">0</text>
  </g>
  <g class="region" id="chart_point_7">
    <rect x="854.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
    <circle cx="903" cy="300" class="point" r="5" />
    <text x="903" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 903,320)">2014-05-11</text>
    <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="903" y="280" font-size="30" visibility="hidden">0</text>
  </g>
</svg>

在这种情况下，图表是最小的一个。我有8到12倍的大，而且复杂得多一次。感谢评论。

Answer 1

建立this answer以及上述评论：

var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);

如果您确实需要非JS解决方案：convert到PNG（或任何其他无损格式），请使用trim来删除空白。您可以执行此操作from within PHP。

HTML5内联SVG autocrop空格

1 个答案: