HTML5 Inline SVG Autocrop Whitespace

Ich habe ein SVG-Diagramm (kompliziert ein wenig), das mit PHP und einige Daten aus der Datenbank generiert wird. In diesem Fall kann ich die Länge der Etiketten auf der SVG und irgendetwas nicht vorhersagen. Das Diagramm wird im laufenden Betrieb generiert, und Daten sind immer unbekannt. Deshalb ist ich mit diesem Start:HTML5 Inline SVG Autocrop Whitespace

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

Ich gründe großes Sichtgerät (1000, 1000) und ich beginne SVG irgendwo in der Mitte dieses Sichtgerätes zu erzeugen. Danach sind einige Elemente in der Nähe von links, ein anderes in der Nähe von oben, und zum Beispiel unten habe ich 200 Leerraumrechtecke.

Gibt es eine Option zum automatischen Ausfüllen von Leerzeichen in SVG, um den Inhalt anzupassen? Ich habe eine Intuition, dass meine Idee nicht gut ist, ich etwas vermisse oder etwas schrecklich falsch mache.

Lassen Sie uns sagen, dass dies ein Beispiel für das Endprodukt sein kann (copyright wikipedia): http://upload.wikimedia.org/wikipedia/commons/f/f4/Wiggers_Diagram.svg

Ich bin hier nicht weiter Code setzen, wie es die SVG Generation Funktion nicht wirklich sinnvoll ist riesig und kompliziert und das Problem entspricht eher dem Endergebnis.

Jede Lösung oder Idee wird geschätzt, das Problem entspricht HTML5 und SVG (Tags), aber die Lösung kann auch Javascript oder CSS (falls vorhanden).

Update: Ich war für echte Demo gefragt (minimal):

.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 diesem Fall wird das Diagramm ths kleinste ist. Ich bin einmal 8 - 12 Mal größer und viel komplizierter. Danke für den Kommentar.

Quelle

2014-05-09 Jacek Kowalewski

Sie sollten eine Demo mit einer Frage wie dieser bereitstellen. Haben Sie sich [diese Antwort?] Angesehen (http://stackoverflow.com/a/14363879/2065702) –

Thx für einen Kommentar. Frage aktualisiert Das sieht nach etwas aus, wonach ich suche. Ich muss es sorgfältig lesen und überprüfen. Ich habe mich gefragt, keine JavaScript-Lösung ... –

OK, das ist eine gute Problemumgehung. Aber ich hoffe auf eine Lösung, die den SVG nicht dynamisch beschneidet, sondern physikalisch die SVG kleiner macht. Wenn es möglich ist. –

Gebäude aus this answer und den obigen Kommentaren:

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

Wenn Sie wirklich eine nicht-JS-Lösung benötigen: convert zu PNG (oder anderes verlustfreies Format), dann trim verwenden, um die Leerzeichen abreißen. Sie können dies from within PHP tun.

Quelle

2014-05-16 14:42:06 candu

thx :). Das ist toll! –

HTML5 Inline SVG Autocrop Whitespace

Antwort

Verwandte Themen