स्केल इनलाइन एसवीजी प्रतीक <use>

Question

साथ संदर्भित मैं एक एसवीजी लोगो इसलिए की तरह एक प्रतीक के रूप में परिभाषित किया गया है:

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

इस परिभाषा body के शीर्ष पर शामिल है और display:none के साथ स्टाइल है।

दस्तावेज़ में बाद में, मैं इस तरह से लोगो का उपयोग करें:

.Header-logo { 
    height: 5rem; 
} 

यह इस में जो परिणाम:

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

मैं एक स्वत: चौड़ाई के साथ, लोगो एक निश्चित ऊंचाई बनाना चाहते :

हालांकि ऊंचाई सही है (यहां, 1rem 24px है), चौड़ाई डिफ़ॉल्ट 300px बनी हुई है। width:auto जोड़ना कोई बदलाव नहीं करता है। इस समस्या की खोज में, मैं कई संभावित समाधान here और here पर आया। हालांकि, मेरे आवेदन के साथ कोई भी काम नहीं कर रहा है: छवि के एक बड़े हिस्से को उपयोग में कटौती के बिंदु पर व्यूबॉक्स को दोबारा लागू करना और <img> टैग का उपयोग करना संभव नहीं है क्योंकि मुझे स्टाइल उद्देश्यों के लिए एसवीजी के डीओएम तक पहुंच बनाए रखने की आवश्यकता है।

मैं छवि के ज्ञात पहलू अनुपात के आधार पर एक हार्ड-कोडित चौड़ाई जोड़ सकता हूं, लेकिन यह एक गैर-इष्टतम समाधान प्रतीत होता है: यदि भविष्य में लोगो का पहलू अनुपात बदलता है तो क्या होगा? एक और विकल्प width:100% को परिभाषित करना है, जो काम करता है, हालांकि, यह <a> के 'क्लिक करने योग्य' क्षेत्र को हेडर की पूरी चौड़ाई में विस्तारित करता है, जिसे मैं टालना चाहता हूं।

क्या <symbol> परिभाषा में व्यूबॉक्स का वर्णन किया गया है, तो परिभाषित ऊंचाई के साथ स्वचालित रूप से आकार की चौड़ाई हो सकती है? क्या मुझे <img> टैग या एसवीजी तत्व के लिए पूर्ण चौड़ाई का उपयोग करने के लिए रील किया जाना चाहिए?

Answer 1

दुर्भाग्यवश यह <svg> तत्व का आयाम है जो आपके <header> में दिखाई देता है जो महत्वपूर्ण है। एक बच्चे के प्रतीक संदर्भ से viewBox उत्तराधिकारी का कोई तरीका नहीं है।

आपको प्रतीक से viewBox (चौड़ाई और ऊंचाई) की प्रतिलिपि बनाना होगा।

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