我有一个 SVG 图(有点复杂),它是使用 php 和数据库中的一些数据生成的。在那种情况下,我无法预测 svg 和任何东西上标签的长度。图表是即时生成的,数据总是未知的。这就是为什么,我从这个开始:
<svg class="chart" id="chart1" viewBox="0 0 1000 1000">
我正在设置巨大的 View 框 (1000, 1000),然后我开始在该 View 框中间的某处生成 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 倍大,一次更复杂。感谢评论。
最佳答案
建筑关闭 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 自动裁剪空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23560038/