Scala simbolo in linea SVG riferimento con <use>

Question

Ho un logo SVG definito come un simbolo in questo modo:

<svg class="SpriteSheet"> 
    <symbol id="icon-logo" viewBox="-12 -79.61 407.19 108.36"> 
     <path id="logo-upperLeft" d="M0-67.61l83.66 0 0-10 -93.66 0 0 30.92 10 0Z" transform="translate(-2 -2)"></path> 
     <path id="logo-upperRight" d="M383.19-67.61l-83.66 0 0-10 93.66 0 0 30.92 -10 0Z" transform="translate(2 -2)"></path> 
     <path id="logo-lowerLeft" d="M0 16.75l83.66 0 0 10 -93.66 0 0-30.92 10 0Z" transform="translate(-2 2)"></path> 
     <path id="logo-lowerRight" d="M383.19 16.75l-83.66 0 0 10 93.66 0 0-30.92 -10 0Z" transform="translate(2 2)"></path> 
    </symbol> 
</svg> 

Questa definizione è inclusa nella parte superiore della body e in stile con display:none.

Più avanti nel documento, io uso il logo in questo modo:

<header class="Header"> 
    <h1 class="Header-headline"> 
     <a href="/"> 
      <svg class="Header-logo"> 
       <use xlink:href="#icon-logo"></use> 
      </svg> 
     </a> 
    </h1> 
</header> 

Voglio fare il logo di una certa altezza, con una larghezza automatica:

.Header-logo { 
    height: 5rem; 
} 

Questo si traduce in questo :

Sebbene l'altezza sia corretta (qui, 1rem è 24px), la larghezza rimane il valore predefinito di 300 px. L'aggiunta di width:auto non causa modifiche. Nella ricerca di questo problema, mi sono imbattuto in diverse soluzioni possibili here e here. Tuttavia, nessuno ha funzionato con la mia applicazione: riapplicare la viewBox al punto di utilizzo taglia fuori larga parte dell'immagine e usare un tag <img> non è possibile perché ho bisogno di mantenere l'accesso al DOM di SVG per motivi di stile.

Potrei aggiungere una larghezza hard-coded in base al rapporto di aspetto noto dell'immagine, ma questa sembra essere una soluzione non ottimale: cosa succede se le proporzioni del logo cambiano in futuro? Un'altra opzione è quella di definire width:100%, che funziona, tuttavia, ciò rende l'area "cliccabile" di <a> estesa sull'intera larghezza dell'intestazione, che vorrei evitare.

È possibile avere una larghezza di dimensioni automaticamente con un'altezza definita quando la viewBox è descritta nella definizione <symbol>? Devo essere relegato all'utilizzo di un tag <img> o di una larghezza assoluta per l'elemento SVG?

Answer 1

Sfortunatamente sono le dimensioni dell'elemento <svg> visualizzato nel numero <header> che è importante. Non è possibile ereditare uno viewBox da un riferimento a un simbolo figlio.

È necessario copiare viewBox (larghezza e altezza) dal simbolo.

.Header-logo { 
 
    height: 5rem; 
 
} 
 

 
.Header-logo2 { 
 
    height: 8rem; 
 
}

<svg class="SpriteSheet" width="0" height="0"> 
 
    <symbol id="icon-logo" viewBox="-12 -79.61 407.19 108.36"> 
 
     <path id="logo-upperLeft" d="M0-67.61l83.66 0 0-10 -93.66 0 0 30.92 10 0Z" transform="translate(-2 -2)"></path> 
 
     <path id="logo-upperRight" d="M383.19-67.61l-83.66 0 0-10 93.66 0 0 30.92 -10 0Z" transform="translate(2 -2)"></path> 
 
     <path id="logo-lowerLeft" d="M0 16.75l83.66 0 0 10 -93.66 0 0-30.92 10 0Z" transform="translate(-2 2)"></path> 
 
     <path id="logo-lowerRight" d="M383.19 16.75l-83.66 0 0 10 93.66 0 0-30.92 -10 0Z" transform="translate(2 2)"></path> 
 
    </symbol> 
 
</svg> 
 

 

 
<header class="Header"> 
 
    <h1 class="Header-headline"> 
 
     <a href="/"> 
 
      <svg class="Header-logo" viewBox="0 0 407.19 108.36"> 
 
       <use xlink:href="#icon-logo"></use> 
 
      </svg> 
 
     </a> 
 
    </h1> 
 
</header> 
 

 
<header class="Header"> 
 
    <h1 class="Header-headline"> 
 
     <a href="/"> 
 
      <svg class="Header-logo2" viewBox="0 0 407.19 108.36"> 
 
       <use xlink:href="#icon-logo"></use> 
 
      </svg> 
 
     </a> 
 
    </h1> 
 
</header>