Come centrare e ridimensionare i file SVG all'interno di un altro file SVG

Question

Sto sviluppando un programma che genera file svg in base alle scelte effettuate dall'utente. Una di queste scelte consiste nell'includere un altro file svg centrato su un punto specifico nel primo. Il secondo file ha una proporzione e una dimensione sconosciute, ma dovrebbe essere ridimensionato a una dimensione massima specifica come altezza o larghezza e dovrebbe essere centrato su un punto specifico. Il metodo che uso ora è avere un tag G che contenga il tag SVG dell'immagine inclusa ed eseguire una trasformazione sul tag G per ridimensionare e tradurre. Esiste un modo per eseguire la scala per ottenere una dimensione specifica senza conoscere la dimensione dell'immagine? E c'è un modo per avere le coordinate tradotte da applicare al centro dell'immagine invece dell'angolo in alto a sinistra? Sono molto nuovo per SVG, quindi potrebbe essere che sto andando su questo nel modo sbagliato. C'è forse un modo migliore per ottenere gli stessi risultati?

Answer 1

Credo che si desidera avere prima l'altro file SVG nascosto, chiamata .getBBox() in JavaScript fare alcuni semplici calcoli, impostare i parametri appropriati, riapparire

Answer 2

ho capito quello che vuoi dire, o almeno io pensalo. Non c'è idea migliore nella mia mente di farlo invece di raggruppare. Per me <g> è il modo migliore per manipolare con un frammento di documento SVG. Ma a mio avviso consideri l'elemento <rect> come contenitore per i tuoi dati visivi. Forse quindi <g> non sarebbe necessario, dipende dai requisiti di codifica.

Se avete bisogno di mettere solo l'immagine SVG semplice si può fare come:

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/> 

Se esprimi "larghezza" e "altezza" in unità fisse (come pixel) si otterrà quello che ho' Sto pensando che hai bisogno. Anche "preserveAspectRatio" è lì per dare un'occhiata a questo attributo se ne hai bisogno.

Answer 3

Modifica: questa risposta ti richiede di conoscere la dimensione del file SVG interno. Il modo più disaccoppiato consiste nell'utilizzare il metodo getBBox() sul lato browser, probabilmente utilizzando visibility o display per impedire agli utenti di visualizzare la grafica non graduata. jsFiddle example viene aggiornato per utilizzare questo metodo.

---

Per il ridimensionamento, utilizzare viewBox attribute. Dalla documentazione del W3C:

Spesso è opportuno specificare che un determinato set di grafica si estenda per adattarsi a un particolare elemento contenitore. L'attributo 'viewBox' fornisce questa funzionalità.

Tutti gli elementi che stabiliscono una nuova finestra (vedere elements that establish viewports), ... hanno l'attributo 'viewBox'. Il valore dell'attributo 'viewBox' è un elenco di quattro numeri <min-x>, <min-y>, <width> e <height>, ... che specificano un rettangolo nello spazio utente che deve essere mappato ai limiti della finestra definita dall'elemento specificato, tenendo conto account attribute ‘preserveAspectRatio’.

Example ViewBox illustra l'uso dell'attributo 'viewBox' sull'elemento svg più esterno per specificare che il contenuto SVG deve estendersi per adattarsi ai limiti del viewport.

L'esempio sopra specifica preserveAspectRadio come none, così SVG incorporato estende per adattarsi SVG contenitore esattamente. Il valore predefinito di , che è xMidYMid meet, dovrebbe soddisfare le tue esigenze. Questo attributo consente un controllo a grana fine su how to scale and position the enclosed graphics.

Dopo aver ridimensionato l'SVG interno con una dimensione nota con viewBox, il centraggio dovrebbe essere una questione di semplice calcolo e l'utilizzo dell'attributo transform correttamente. Ecco un esempio ridotta da http://jsfiddle.net/ento/hPuBY/:

<g transform="translate(125, 125)"> 
    <!-- inner SVG is scaled to fit 150x150 --> 
    <svg width="150" height="150" viewBox="0 0 1500 1000"> 
    <!-- coordinate system inside the SVG is 0x0 <> 1500x1000 --> 
    <rect width="1500" height="1000" /> 
    <text x="750" y="550" font-size="150"> 
     Embedded SVG 
    </text> 
    </svg> 
</g>