सामग्री के साथ सम्मिलित एसवीजी छवि का आकार बदलें: यूआरएल()

Question

ठीक है, मुझे जो मिला वह निम्न है: सीएसएस के माध्यम से एचटीएमएल में डाली गई विभिन्न चौड़ाई/ऊंचाइयों वाली एकाधिक svg छवियां। मैं उन्हें सभी को एक ही चौड़ाई में स्केल करना चाहता हूं लेकिन यह काम नहीं करता है (कम से कम सफारी, क्रोम और फ़ायरफ़ॉक्स में नहीं)।

एचटीएमएल:

<h4 class="before" id="foo">Foo</h4> 
<h4 class="before" id="bar">Bar</h4> 
<h4 class="before" id="foobar">Foobar</h4> 

सीएसएस:

.before:before { width: 20px; } 
#foo:before { content:url('foo.svg'); } 
#bar:before { content:url('bar.svg'); } 
#foobar: before { content:url('foobar.svg'); } 

इतना है कि वे 20px चौड़ाई प्रत्येक के साथ प्रदर्शित किए जाते हैं कैसे मैं उन svg छवियों का आकार सकता है (लेकिन svg में परिवर्तन नहीं करते अपने आप)?

Answer 1

यदि आप जानते हैं कि ऊंचाई क्या हो रही है, तो आप छवियों को छद्म तत्वों के लिए पृष्ठभूमि के रूप में सेट कर सकते हैं और background-size: 20px auto; घोषित कर सकते हैं, लेकिन आपको psuedo की ऊंचाई के लिए सटीक आकार या बड़ा पता होना चाहिए खुद को हटाओ।

इसके अलावा, मैं इसे पूरी तरह से सीएसएस में काम करने के लिए कोई रास्ता नहीं ढूंढ पाया। यदि आपके पास सर्वर-साइड कोडिंग तक पहुंच है, तो आप एसवीजी फ़ाइल खोल सकते हैं और स्वचालित रूप से आकारों को मछली निकाल सकते हैं।