Salvataggio automatico di un file SVG?

Ecco un code demo Salvataggio automatico di un file SVG?

Ho un file SVG con un'altezza sconosciuta. Posso capirlo dopo aver caricato in json e usare javascript + math ma c'è qualche css che posso usare per ridimensionarlo dinamicamente?

css:

svg { 
    width: 500px; 
    height: 9000px; 
} 
.tabme { 
    border:3px solid red; 
    height: 200px; 
    overflow:scroll; 
}

html:

<div class="tabme"> 
    <div id="Chart"> 
    <div class="chartbody" /> 
    <svg> 
     <rect width="190" y="0" height="16" x="175" /> 
     <rect width="190" y="20" height="16" x="175" /> 
     <rect width="190" y="40" height="16" x="175" /> 
     <rect width="190" y="60" height="16" x="175" /> 
     <rect width="190" y="80" height="16" x="175" /> 
     <rect width="190" y="100" height="16" x="175" /> 
     <rect width="190" y="120" height="16" x="175" /> 
     <rect width="190" y="140" height="16" x="175" /> 
     <rect width="190" y="160" height="16" x="175" /> 
     <rect width="190" y="180" height="16" x="175" /> 
     <rect width="190" y="200" height="16" x="175" /> 
     <rect width="190" y="220" height="16" x="175" /> 
     <rect width="190" y="240" height="16" x="175" /> 
     <rect width="190" y="260" height="16" x="175" /> 
     <rect width="190" y="280" height="16" x="175" /> 
     <rect width="190" y="300" height="16" x="175" /> 
    </svg> 
    </div> 
</div>

fonte

2013-01-16 BruteCode

svg {altezza: 100%; larghezza: auto} può essere? E funzionerà come un'immagine e sarà 200px in altezza, e lo salverà rapporto .. – Flops

@Flops: auto non funziona. Inoltre volevo altezza – BruteCode

Se l'elemento SVG non ha attributi width e l'altezza, la larghezza/altezza dovrebbe essere calculated according to the CSS specs, come sottolineato da Robert Longson . Tuttavia, tali valori non rifletteranno le dimensioni corrette del contenuto di SVG. È possibile scoprire la corretta larghezza/altezza usando getBBox():

// Javascript to run after document load 
 
var svg = document.getElementsByTagName("svg")[0]; 
 
var bbox = svg.getBBox(); 
 
svg.setAttribute("width", bbox.x + bbox.width + "px"); 
 
svg.setAttribute("height",bbox.y + bbox.height + "px");

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect x="30" y="40" width="50" height="60"/> 
 
</svg>

fonte

2013-01-16 17:09:54

Ci sono delle regole che definiscono la larghezza/altezza da usare in http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width si finisce con 300px x 150px se non c'è niente meglio. –

@RobertLongson: interessante, grazie per queste informazioni! La mia impressione era che i risultati fossero incoerenti, ma forse la mia memoria è semplicemente imprecisa. Cambierò la risposta per incorporare tali informazioni. –

I risultati sono incoerenti in quanto non tutti gli UA hanno già implementato correttamente le regole. –

Un'alternativa è quella di fare simile alle JS cui sopra, ma imposta viewBox invece di width e height (nota, non viewbox!) da JS con i valori della chiamata getBBox(). Quindi utilizzare preserveAspectRatio="xMidYMid meet" o simile.

https://jsfiddle.net/t88pLgbb/4/

fonte

2017-12-12 23:39:33 GufNZ

Salvataggio automatico di un file SVG?

risposta

Problemi correlati