HTML5 satır içi SVG autocrop beyaz boşluk

Veri tabanından php ve bazı veriler kullanılarak oluşturulan bir SVG şeması (biraz karmaşık) var. Bu durumda, svg üzerindeki etiketlerin uzunluğunu ve hiçbir şeyi tahmin edemiyorum. Diyagram anında oluşturulur ve veriler her zaman bilinmemektedir.HTML5 satır içi SVG autocrop beyaz boşluk

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

ben büyük ViewBox'ı (1000, 1000) ayarlıyorum ve bu izleme kutusu ortasında bir yerlerde SVG'yi elde etmeye başlayın: Bununla başlıyorum nedeni de budur. Bundan sonra, bazı elemanlar bazen sol tarafa yakın, üst kısımda bir diğerine yakın ve örneğin altta 200 boş alan dikdörtgeni var.

SVG'de içeriği eşleştirmek için otomatik kırpma beyazı var mı? Fikrimin iyi olmadığına dair bir sezgim var, bir şeyi özlüyorum ya da çok yanlış bir şey yapıyorum. o SVG nesil fonksiyonu gerçekten anlamda yapmaz gibi http://upload.wikimedia.org/wikipedia/commons/f/f4/Wiggers_Diagram.svg

Burada başka bir kod koyarak değilim:

en bu son ürün (telif hakkı wikipedia) bir örnek olabilir diyelim büyük ve karmaşık ve problem daha çok nihai sonuca karşılık gelir.

Herhangi bir çözüm veya fikir takdir edilecektir, Sorun, html5 ve svg (tags) 'e karşılık gelir, ancak çözüm ayrıca javascript veya css (eğer varsa) olabilir.

Güncelleme: I (minimal) gerçek demo için istendi: diyagram ths en küçük biridir Bu durumda

.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>

. Bir zamanlar 8 - 12 kat daha büyük ve çok daha karmaşık. Yorum için Thx. Eğer gerçekten bir JS olmayan çözüm gerekiyorsa

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

kaynak

2014-05-09 Jacek Kowalewski

Böyle bir soruyu içeren bir tanıtım sağlamalısınız. Yorum için [bu yanıtı] (http://stackoverflow.com/a/14363879/2065702) –

Thx'e baktınız mı? Soru güncellendi. Bu benim aradığım şeylere benziyor. Dikkatlice okumalı ve kontrol etmeliyim. Hiçbir javascript çözümü için merak ediyordum ... –

Tamam, bu iyi bir çözümdür. Ama ben svg dinamik olarak kesmek değil, ama fiziksel olarak svg daha küçük yapar bir çözüm umuyoruz. Eğer mümkünse. –

this answer ve yukarıdaki yorumları kapalı Bina PNG convert (veya başka kayıpsız biçimi), sonra boşluk çökertelim trim kullanın. Bunu from within PHP yapabilirsin.

kaynak

2014-05-16 14:42:06 candu

thx :). Bu harika! –

HTML5 satır içi SVG autocrop beyaz boşluk

cevap

İlgili konular