क्या एक छद्म तत्व में एसवीजी को सामग्री के रूप में उपयोग करने का एक तरीका है: पहले या बाद में

245

मैं कुछ चयनित तत्वों से पहले कुछ एसवीजी छवियों को रखना चाहता हूं। मैं JQuery का उपयोग कर रहा हूं, लेकिन यह अप्रासंगिक है। मैं ऐसा करना चाहूंगा: तत्व से पहले:

  #mydiv:before {
    content:"<svg.. code here</svg>";
    display:block;
    width:22px;
    height:10px;
    margin:10px 5px 0 10px;
  }

यदि मैं इसे ऊपर दिखाए अनुसार करता हूं, तो यह केवल स्ट्रिंग प्रदर्शित करता है। मैंने ऐनक की जाँच की और लगता है कि क्या सामग्री हो सकती है पर कुछ प्रतिबंध हैं। क्या इस प्रतिबंध के आसपास कोई काम है? केवल सामग्री सीएसएस मेरे प्रश्न के लिए प्रासंगिक है।

css  svg 
— धूप
स्रोत
1
क्या पृष्ठभूमि की छवि के रूप में इसका उपयोग करने में कुछ गड़बड़ है?
— cimmanon
1
मैं JQuery यूआई टूलटिप्स के लिए फैंसी संकेत उत्पन्न करने के लिए इसका उपयोग करना चाहता हूं। अब मैं CSS pseudo तत्वों को हैक करता हूं लेकिन यह मुझे केवल त्रिकोण देता है। पृष्ठभूमि छवि इस मामले में काम नहीं करेगी क्योंकि मुझे कुछ ऐसा चाहिए जो तत्व के बाहर जाता है।
— सनी

जवाबों:

252

हाँ तुम कर सकते हो! बस यह परीक्षण किया है और यह बहुत अच्छा काम करता है, यह बहुत बढ़िया है! यह अभी भी html के साथ काम नहीं करता है, लेकिन यह svg के साथ करता है।

मेरे index.html में मेरे पास है: 

<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

और मेरा परीक्षण। Svg इस तरह दिखता है:

<svg xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
— dezman
स्रोत
18
जब तक SVGs विशेष कर रहे हैं, आप के रूप में आप एक छवि होगा उन्हें एक ही इलाज के लिए सक्षम होना चाहिए: content: url(path/to/my.svg)। हालांकि यह जरूरी नहीं है कि यह jQuery यूआई टूलटिप पुस्तकालय के साथ काम करेगा, हालांकि।
— cimmanon
1
@cimmanon हम्म, यह मिठाई है, मैं यह परीक्षण करना चाहता हूं। इसलिए my.html या जो कुछ भी मैं प्रस्तुत करने के लिए HTML कोड का एक गुच्छा हो सकता है ... भयानक लगता है।
— dezman
2
तुमने ऐसा क्यों करना चाहोगे? यदि आपके पास फ़ाइल में पहले से ही svg कोड है, तो इसे छद्म श्रेणी में रखने की कोई आवश्यकता नहीं है। छद्म वर्गों की पूरी बात यह है कि जब आप थोड़ा सा सामग्री जोड़ना चाहते हैं तो DOM तत्वों को कम करना है, लेकिन आपके मामले में यदि आप अपने svg कोड का उपयोग करते हैं तो सामान्य रूप से यह छद्म में डालने से ज्यादा बुरा नहीं होगा (और शायद क्लीनर)। -क्लास (जो शायद असंभव भी है)। जब तक आप अपने एसवीजी कोड को स्थानों के एक समूह में नहीं रखना चाहते हैं, तो इस स्थिति में आपको एक छवि की तरह एक अलग फ़ाइल में अपना एसवीजी कोड रखना चाहिए।
— डेजमैन
6
दुर्भाग्य से, मुझे विश्वास नहीं है कि यह समाधान एसवीजी स्प्राइट्स के साथ काम करता है। उदाहरण के लिए, content: url(mysprite.svg#my-icon)वास्तव में आपके आइकन को नहीं खींचेंगे। मैं गलत साबित होना पसंद करूंगा, हालाँकि :)
— जेसन
1
@ वॉटसन, सिमेंटिक। HTML = संरचना, CSS = प्रस्तुति। यदि कोई एसवीजी सजावटी है तो यह एचटीएमएल संरचना में नहीं होना चाहिए, यह सीएसएस में होना चाहिए।
— मृत्यु 11
137

हाँ। आप SVG को एक खाली की पृष्ठभूमि-छवि के रूप में जोड़ सकते हैं: बाद में या: पहले। हेयर यू गो:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}
— DerZyklop
स्रोत
4
मुझे यह सबसे अच्छा समाधान लगता है, थोड़ी देर की तलाश के बाद। आप सम्मिलित तत्व के हर एक पहलू को नियंत्रित कर सकते हैं और सीएसएस स्टाइल-शीट काम कर सकते हैं सामान्य तरीके से, अलग-अलग तर्क के साथ। महान
— डैनियलो 1515 15
... आह, यह मेरी उम्मीद है, जब तक मुझे पता background-sizeनहीं है कि ओपेरा मिनी में समर्थित नहीं है। यह कितना निराशाजनक है।
— मृत्यु
बढ़िया काम किया। @deathlock, background-size की जरूरत नहीं होनी चाहिए क्योंकि आप svg में ही आयामों को परिभाषित कर रहे हैं, मुझे इसकी आवश्यकता नहीं थी।
— एरिक सोयके
1
प्रश्न को "छद्म तत्व में: पहले या बाद में:" के बाद स्वीकार किए जाने वाले उत्तर होना चाहिए
— ZalemCitizen
मुझे <?xml version="1.0" encoding="utf-8"?>इसे बनाने के लिए अपनी svg फ़ाइल की शुरुआत में जोड़ना पड़ा ।
— निकोलस बोइथाल्ट
130 
#mydiv:before {
    content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    width:22px;
    height:10px;
    margin:10px 5px 0 10px;
}

सुनिश्चित करें कि आपके svg में दोहरे उद्धरण चिह्नों और uriencode में कोई # चिह्न नहीं हैं।

— जेनी
स्रोत
8
चूंकि एसवीजी अक्सर दोहरे उद्धरण चिह्नों का उपयोग करते हैं, आप केवल बाहरी एकल उद्धरणों का भी उपयोग कर सकते हैं। @ जेनी का सुझाव यह करने का एक शानदार तरीका है यदि आप बाहरी एसवीजी फ़ाइल का उपयोग नहीं करना चाहते हैं।
— माइक्रो
2
यह भी खूब रही। दुर्भाग्य से यह केवल मेरे लिए क्रोम (क्रोम, फ़ायरफ़ॉक्स और एज पर परीक्षण) के साथ काम करता है।
— आर्सेन
2
ठीक है, यह एफएफ पर काम करता है। बस "नहीं #" भाग पर ध्यान देने की जरूरत है। यह भी सुनिश्चित करें कि div टैग (स्पैन के साथ काम नहीं करता है) का उपयोग करें। दुख की बात है कि अभी भी एज के लिए कोई सफलता नहीं है।
— आर्सेन
इतने शानदार समाधानों की तरह, यह IE11 द्वारा समर्थित नहीं है। url('file.svg')हालांकि काम करता है।
— बॉब स्टीन
6
xmlns='http://www.w3.org/2000/svg'Chrome 66.x में काम करने के लिए मुझे जो कुछ महत्वपूर्ण मिला वह <svg> भाग में जोड़ना है। उदाहरण के लिए - छोटा शेवरॉन होगा: content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
— darth0s
28

सीएसएस स्प्राइट्स और डेटा यूरी का उपयोग करने से अतिरिक्त लोडिंग और कम अनुरोध जैसे अतिरिक्त दिलचस्प लाभ मिलते हैं और हमें इमेज / बेसफोन का उपयोग करके IE8 समर्थन प्राप्त होता है:

एसवीजी का उपयोग करके कोडपेन नमूना

एचटीएमएल

<div class="div1"></div>
<div class="div2"></div>

सीएसएस

.div1:after, .div2:after {
  content: '';
  display: block;
  height: 80px;
  width: 80px;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
.div2:after {
  background-position: -80px 0;
}

IE8 के लिए, इसे बदलें:

  background-image: url(data:image/png;base64,data......);
— एक पुत्र
स्रोत
लेकिन यह स्केलेबल नहीं है, है ना? मैं इसे 16px या 320px वसीयत में नहीं बदल सकता।
— मृत्यु
@ निश्चित रूप से यह तराजू है, हालांकि मेरा नमूना नहीं है क्योंकि इसमें एक निश्चित आकार सेट है, 80px चौड़ा / उच्च।
— आसन
1
@ नीचे मैं पूछ सकता हूं कि क्या आपने डाउनवोट किया था क्योंकि ऊपर का नमूना नहीं था?
— आसन
आप इसे कैसे बनाएंगे? और नहीं, मैंने नहीं किया।
— मृत्युभोज
@deathlock धन्यवाद, और यहाँ svg: jsfiddle.net/ess6ywce ... प्रतिशत का उपयोग करने का एक तरीका है । इसके अलावा, के साथ ऐसा खोज scale svgऔर आप उतने ही अधिक रास्ते मिल जाएगा
— Ason
22 
<div class="author_">Lord Byron</div>

.author_ {  font-family: 'Playfair Display', serif; font-size: 1.25em; font-weight: 700;letter-spacing: 0.25em; font-style: italic;
  position:relative;
  margin-top: -0.5em;
  color: black;
  z-index:1;
  overflow:hidden;
  text-align:center;
 
}


.author_:after{
   left:20px;
  margin:0 -100% 0 0;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20-12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6%2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20-49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C-2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40%2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C-9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15%20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.author_:before {
  right:20px;
  margin:0 0 0 -100%;
  display: inline-block;
  height: 10px;
  content: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D%2220px%22%20viewBox%3D%220%200%201200%20130%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20d%3D%22M55%2068c-17%2C6%20-8%2C23%204%2C28%2012%2C5%2040%2C7%2048%2C-8%209%2C-15%20-9%2C-34%20-26%2C-41%20-17%2C-8%20-45%2C-7%20-62%2C2%20-18%2C8%20-19%2C18%20-20%2C27%20-1%2C9%200%2C29%2027%2C52%2028%2C23%2052%2C33%20102%2C33%2049%2C-1%20130%2C-31%20185%2C-50%2056%2C-19%2074%2C-21%2096%2C-23%2022%2C-2%2029%2C-2%2056%2C6%2027%2C8%2043%2C17%2043%2C17%2014%2C6%2016%2C7%2041%2C16%2025%2C9%2069%2C15%20120%2C11%2051%2C-3%20126%2C-22%20181%2C-32%2054%2C-9%20105%2C-20%20148%2C-23%2042%2C-3%2071%2C1%20104%2C6%2034%2C4%2065%2C14%2098%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
	<div class="author_">Lord Byron</div>
स्निपेट का विस्तार करें

SVG एन्कोडिंग url- एनकोडर के लिए सुविधाजनक उपकरण

— अलेक्सेई ज़बाबुरिन
स्रोत
5

सावधान रहें अन्य सभी उत्तरों में IE में कुछ समस्या है।

आइए इस स्थिति को देखें - पूर्वनिर्मित आइकन के साथ बटन। सभी ब्राउज़र इसे सही ढंग से संभालते हैं, लेकिन IE तत्व की चौड़ाई लेता है और इसे फिट करने से पहले सामग्री को मापता है। JSFiddle

#mydiv1 { width: 200px; height: 30px; background: green; }
#mydiv1:before {
    content: url("data:url or /standard/url.svg");
}

समाधान तत्व से पहले आकार सेट करना है और इसे छोड़ना है जहां यह है:

#mydiv2 { width: 200px; height: 30px; background: green; }
#mydiv2:before {
    content: url("data:url or /standard/url.svg");
    display: inline-block;
    width: 16px; //only one size is alright, IE scales uniformly to fit it
}

background-image+ background-sizeसमाधान के रूप में अच्छी तरह से काम करता है, लेकिन, थोड़ा असुविधाजनक है, क्योंकि आप एक ही आकार में दो बार निर्दिष्ट करना होगा।

IE11 में परिणाम:

IE प्रतिपादन

— zbycz
स्रोत
5

इस विषय को आगे बढ़ाने के लिए। यदि आप फ़ॉन्ट विस्मयकारी 5 आइकन जोड़ना चाहते हैं, तो आपको कुछ अतिरिक्त CSS जोड़ने होंगे।

डिफ़ॉल्ट रूप से प्रतीक में कक्षाएं svg-inline--faऔर हैं fa-w-*।

संशोधक वर्ग भी हैं जैसे fa-lg, fa-rotate-*और अन्य। आपको svg-with-js.cssफ़ाइल की जांच करने और उसके लिए उचित सीएसएस खोजने की आवश्यकता है।

आपको अपने स्वयं के रंग को सीएसएस आइकन में जोड़ने की आवश्यकता है अन्यथा यह डिफ़ॉल्ट रूप से काला हो जाएगा, उदाहरण के लिए fill='%23f00'जहां %23एन्कोडेड है #।

h1::before{

  /* svg-inline--fa */
  display:inline-block;
  font-size:inherit;
  height:1em;
  overflow:visible;
  vertical-align:-.125em;
  
  /* fa-w-14 */
  width:.875em;
  
  /* Icon */
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f00' d='M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zM264 408c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48z'%3E%3C/path%3E%3C/svg%3E");
  
  /* Margin */
  margin-right:.75rem;
}
<h1>Lorem Ipsum</h1>
स्निपेट का विस्तार करें

— जकुब मुदा
स्रोत
-1 
.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}
— माइकल अल्फांड्रे
स्रोत
3
आपको अपना उत्तर थोड़ा और समझाना चाहिए। बस इससे, यह बताना मुश्किल है कि आपका उत्तर कैसे या क्यों काम करता है।
— ifconfig
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.