SVG <defs> genera spazio vuoto

Sto utilizzando SVG nel mio progetto, ora devo creare un elemento SVG all'interno di una pagina Web con solo <defs>. In seguito nella pagina devo usare molte volte gli oggetti definiti in precedenza. Il problema sta nell'oggetto con le definizioni, infatti crea uno spazio vuoto nella pagina. Prova questo codice:SVG <defs> genera spazio vuoto

<!DOCTYPE html> 
<html> 
    <body> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
      <defs> 
       <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
      </defs> 
     </svg> 

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> 
      <use x=0 y=0 xlink:href="#star"> 
     </svg> 
    </body> 
</html>

ho il problema sia con Firefox e Chrome. Non mi interessa di IE.

fonte

2013-05-24 Max Markson

Aggiungi a zero dimensioni alla definizione <svg> tag:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

Come si imposta né finestra né le dimensioni, immagino, il browser ha tentato di dedurre i valori qui e, quindi, con un conseguente "dimensione predefinita" per l'SVG , rendendo così lo spazio vuoto.

EDIT

alternativa, impostare display: none al <svg> con l'elemento <defs>:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;"> 
     <defs> 
      <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
     </defs> 
    </svg>

fonte

2013-05-24 07:21:51 Sirko

Lo spazio è ridotto ma non è scomparso. Prova a spostare la definizione dopo l'uso, vedrai l'uso spostarsi verso l'alto e lo spazio vuoto verso il basso. –

@MaxMarkson Nel mio FF e Chrome il '' -SVG è scomparso completamente. Sei sicuro, non ci sono alcuni paddings o margini applicati da qualche parte? – Sirko

Controlla queste immagini: http://imageshack.us/a/img819/2999/defsafter.png http://imageshack.us/a/img826/1323/defsbefore.png –

Le due ragioni di questa diffusione è:

mancanza di dimensioni
<svg> sono resi come display:inline

Aggiunta dimensioni al tag <svg> inizialmente nascondere la maggior parte dello spazio occupato, ma una piccola porzione rimarrà.

L'impostazione display:none nasconderà qualsiasi motivo/sfumatura/ecc. A cui si fa riferimento in altri <svg> elementi e pertanto non è appropriato.

Per nascondere completamente, impostare il tag <svg> come display:block. Rispetterà quindi le dimensioni di lunghezza zero date in precedenza.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;"> 
    <defs> 
     <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> 
    </defs> 
</svg>

fonte

2016-06-02 16:33:04 jussinen

Questo ha funzionato solo dopo aver impostato anche 'width =" 0 "' e 'height =" 0 "' in combinazione con 'display: block' o 'position: absolute'. – Dominik

SVG <defs> genera spazio vuoto

risposta

Problemi correlati