Skala inline SVG symbol odwołuje się <use>

Question

Mam logo SVG zdefiniowany jako symbol tak:

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

Ta definicja jest dołączony na górze body i stylem display:none.

Później w dokumencie, używać logo w ten sposób:

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

Chcę, aby logo pewnej wysokości, z automatycznym szerokość:

.Header-logo { 
    height: 5rem; 
} 

To powoduje to :

Mimo że wysokość jest prawidłowa (tutaj 1rem ma 24px), szerokość pozostaje domyślnie 300px. Dodanie width:auto nie powoduje żadnych zmian. Podczas badania tego problemu natknąłem się na kilka możliwych rozwiązań: here i here. Jednak żadna nie zadziałała z moją aplikacją: ponowne zastosowanie widoku w miejscu użycia powoduje odcięcie dużej części obrazu i użycie znacznika <img> nie jest możliwe, ponieważ muszę zachować dostęp do DOM DOMU SVG w celu stylizacji.

Mogę dodać zakodowaną szerokość w oparciu o znany współczynnik proporcji obrazu, ale wydaje się to być rozwiązaniem nieoptymalnym: co się stanie, jeśli współczynnik kształtu logo zmieni się w przyszłości? Inną opcją jest zdefiniowanie width:100%, która działa, jednak powoduje to, że obszar "klikalny" w obszarze <a> przebiega na całej szerokości nagłówka, którego chciałbym uniknąć.

Czy możliwe jest posiadanie automatycznie rozmiaru o określonej wysokości, gdy widok jest opisany w definicji <symbol>? Czy muszę podlegać relegacji przy użyciu znacznika <img> lub bezwzględnej szerokości elementu SVG?

Answer 1

Niestety, ważne są wymiary elementu <svg>, który pojawia się w Twoim <header>. Nie ma sposobu, aby odziedziczyć viewBox z odniesienia do symbolu potomnego.

Musisz skopiować viewBox (szerokość i wysokość) z symbolu.

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