I have an SVG diagram (a bit complicated) that is generated using php and some data from a database. In this case, I can not predict the length of the labels on svg and anything. The chart is generated on the fly, and the data is always unknown. This is why I start with this:
<svg class="chart" id="chart1" viewBox="0 0 1000 1000">
I install a huge viewbox (1000, 1000) and I start generating SVG somewhere in the middle of this viewport. After that, some elements are next to the left, and the other is on top, and, for example, at the bottom I have 200 empty rectangles.
Is there any parameter for auto-tracking spaces in SVG to match the content? I have an intuition that my idea is not very good, I am missing something or doing something terribly wrong.
Let's say that this can be an example of the final product (author's Wikipedia): http://upload.wikimedia.org/wikipedia/commons/f/f4/Wiggers_Diagram.svg
I did not put any additional code here, as this does not make sense. The SVG generation function is really huge and complex, and the problem is more likely to match the final result.
Any solution or idea will be appreciated. The problem matches html5 and svg (tags), but the solution could also be javascript or css (if exists).
Update: I was asked to give a real demo (minimum):
.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>
In this case, the chart is the smallest. I have 8-12 times more and much more complicated. thanks for the comment.
html5 margin svg crop
Jacek kowalewski
source share