Spazio HTML in bianco SVG in linea SVG

Ho un diagramma SVG (complicato un po ') che viene generato utilizzando php e alcuni dati dal database. In tal caso, non posso prevedere la lunghezza delle etichette su SVG e nulla. Il diagramma è generato al volo e i dati sono sempre sconosciuti. Per questo motivo, sto iniziando con questo:Spazio HTML in bianco SVG in linea SVG

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

Sto installando enorme viewBox (1000, 1000) ed io iniziare a generare SVG qualche parte nel mezzo di questa viewBox. Dopodiché, alcuni elementi sono vicino alla sinistra a volte, un altro vicino in alto, e ad esempio in fondo ho 200 rettangoli di spazio vuoto.

C'è qualche opzione per lo spazio bianco autocropping in SVG per abbinare il contenuto? Ho intuito che la mia idea non è buona, mi manca qualcosa o faccio qualcosa di terribilmente sbagliato.

Diciamo che questo può essere un esempio del prodotto finale (copyright wikipedia): http://upload.wikimedia.org/wikipedia/commons/f/f4/Wiggers_Diagram.svg

Non sto mettendo ulteriormente il codice qui, in quanto non ha senso la funzione di generazione SVG è davvero enorme e complicato e il problema corrisponde al risultato finale piuttosto.

Qualsiasi soluzione o idea sarà apprezzata, il problema corrisponde a html5 e svg (tag) ma la soluzione può essere anche javascript o css (se esistente).

Aggiornamento: mi è stato chiesto per davvero demo (minima):

.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 questo caso lo schema è THS più piccolo. Ho 8 - 12 volte più grande e molto più complicato una volta. Grazie per il commento.

fonte

2014-05-09 Jacek Kowalewski

È necessario fornire una demo con una domanda come questa. Hai guardato [questa risposta?] (Http://stackoverflow.com/a/14363879/2065702) –

Thx per un commento. Domanda aggiornata. Questo sembra qualcosa che sto cercando. Devo leggerlo attentamente e controllare. Mi chiedevo per nessuna soluzione javascript ... –

OK, questa è una buona soluzione. Ma spero in una soluzione che non ritaglia dinamicamente la svg, ma rende fisicamente la svg più piccola. Se è possibile. –

Partendo this answer e le osservazioni di cui sopra:

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

Se davvero bisogno di una soluzione non-JS: convert in PNG (o qualsiasi altro formato lossless), quindi utilizzare trim per lop fuori gli spazi. È possibile farlo from within PHP.

fonte

2014-05-16 14:42:06 candu

thx :). È fantastico! –

Spazio HTML in bianco SVG in linea SVG

risposta

Problemi correlati