সিএসএসে ইনলাইন এসভিজি

284

সিএসএসে কোনও ইনলাইন এসভিজি সংজ্ঞা ব্যবহার করা কি সম্ভব?

আমি এরকম কিছু বোঝাতে চাইছি:

.my-class {
  background-image: <svg>...</svg>;
}
css  svg 
— akaRem
সূত্র
1
আপনি কী করার চেষ্টা করছেন, স্টাইল শীটে চিত্রটি "উত্স" যুক্ত করুন?
— জুলুল
1
সাবধান থাকবেন যে প্রস্তাবিত সমাধানগুলি সিএসএস চিত্র, এইচটিএমএল <img>ট্যাগ এবং অন্যান্য ক্ষেত্রে কার্যকর হবে না যদি এসভিজি বেশ কয়েকটি চিত্রের মিশ্রণ হয় (এম্বেড না করা হয়), ব্যাকগ্রাউন্ড চিত্র এসভিজি বাহ্যিক চিত্র ব্যবহার করছে না এমন মুখোশ ব্যবহার করে এবং বিশেষত এসভিজির উপর ব্যবহৃত নিষেধাজ্ঞাগুলি দেখুন একটি চিত্র ।
— স্কিপি লে গ্র্যান্ড গৌরু

উত্তর:

376

হ্যা এটা সম্ভব. এটা চেষ্টা কর:

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }

(দ্রষ্টব্য যে এসভিজির সামগ্রীটি কাজ করার জন্য ইউআরএল-পলায়ন করা দরকার, উদাহরণস্বরূপ এটি #প্রতিস্থাপন হয়ে যায় gets %23)

এটি আইই 9 তে কাজ করে (যা এসভিজি সমর্থন করে) । ডেটা-ইউআরএলগুলি IE এর পুরানো সংস্করণগুলিতেও (সীমাবদ্ধতার সাথে) কাজ করে তবে তারা এসভিজিকে স্থানীয়ভাবে সমর্থন করে না।

— Raab
সূত্র
8
একমাত্র ব্রাউজার যেখানে এটি দুর্দান্তভাবে কাজ করে বলে মনে হয় তা হ'ল সাফারি (৫.১.৪)। অপেরা 11.62 এ গ্রেডিয়েন্টটি কালো, আইই 9 এবং ফায়ারফক্স 12 এটি সাদা। ক্রোম 19-এ, এটি নিরবচ্ছিন্নভাবে কাজ করে আপনি% ইউনিটগুলিতে এসভিজির প্রস্থ / উচ্চতা নির্দিষ্ট করে। আমি বলতে চাই এটি একটি বাস্তব বৈশিষ্ট্যের চেয়ে আরও বেশি অদ্ভুততা। যদিও এটি দুর্দান্ত।
— টনিডিজ্বয়েডজ
4
ঠিক আছে ... তবুও আমি যখন আমার সহকর্মীদের মুখের চেহারাগুলি দেখতে এড়াতে উদ্বিগ্ন তখন আমি তাদের মতো একটি সুন্দর ছোট দৈত্য দেখায় তাই এটি সম্ভব হওয়ার জন্য আবার ধন্যবাদ জানাই। আমি কেবলমাত্র স্ট্যান্ডার্ড স্পেসিফিকেশনটিতে গিয়েছিলাম এবং বলেছিলাম যে এটি কার্যত অসম্ভব, যা কোনও ভুল (সাজানো) হিসাবে
— প্রমাণিত হয়েছিল
18
এখানে "ব্রাউজারের বেমানানতা" বেশিরভাগই সঠিক ইউআরএল এড়িয়ে যাওয়ার অভাব, এর ভিতরে url()থাকা সমস্ত কিছুকে ইউআরএল-পলায়ন করা উচিত। অপেরা, ফায়ারফক্স এবং সাফারিতে ঠিক কাজ করে এমন উদাহরণের জন্য jsfiddle.net/6WAtQ দেখুন ।
— এরিক ডালস্ট্রোম
3
বেস -64-এর সাথে বেস 64 এনকোডেড এস জি জি-র মধ্যে কোনও সামঞ্জস্যতার পার্থক্য রয়েছে? বেস 64 আমার সিএসএস ফাইলটি ব্লাট করে, আমি কেবল ইনলাইন এসভিজেএস ব্যবহার করার কথা ভাবছি ..
— 13:39
4
দ্রষ্টব্য, অক্ষর সেট নির্দিষ্ট করার মানক উপায়টি "; utf8" এর পরিবর্তে "; চরসেট = UTF-8" এর সাথে রয়েছে। সরঞ্জাম.এইটিএফ.আর.এইচটিএম
— কিথ শ
240

কিছুটা দেরি হলেও আপনার যদি কেউ পটভূমি হিসাবে ইনলাইন এসভিজিকে ব্যবহার করার চেষ্টা করে পাগল হয়ে যাচ্ছেন তবে উপরের পালানোর পরামর্শগুলি কাজ করে না। একটির জন্য, এটি আইই তে কাজ করে না এবং আপনার এসভিজির বিষয়বস্তুর উপর নির্ভর করে কৌশলটি অন্যান্য ব্রাউজারগুলিতে, এফএফের মতো সমস্যার সৃষ্টি করবে।

যদি আপনি এসভিজি এনকোড করে থাকেন (সম্পূর্ণ ইউআরএল নয়, কেবল এসভিজি ট্যাগ এবং এর সামগ্রীগুলি!) এটি সমস্ত ব্রাউজারে কাজ করে। এখানে বেস 64 তে একই jsfiddle উদাহরণ: http://jsfiddle.net/vPA9z/3/

সিএসএস এখন এইরকম দেখাচ্ছে: 

body { background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");

বেস 64 তে রূপান্তরিত হওয়ার আগে যে কোনও ইউআরএল পলায়ন করা সরিয়ে ফেলতে ভুলবেন না। অন্য কথায়, উপরের উদাহরণটি রঙ = '# fcc' কে রঙে রূপান্তরিত করেছে = '% 23fcc', আপনার আবার ফিরে যাওয়া উচিত।

বেস 64 আরও ভাল কাজ করার কারণটি হ'ল এটি একক এবং ডাবল উদ্ধৃতি এবং url এস্কেপিংয়ের সাথে সমস্ত সমস্যা সরিয়ে দেয়

আপনি যদি জেএস ব্যবহার করছেন, আপনি window.btoa()আপনার বেস 64 এসভিজি উত্পাদন করতে ব্যবহার করতে পারেন ; এবং যদি এটি কাজ না করে (এটি স্ট্রিংয়ের অবৈধ অক্ষরের বিষয়ে অভিযোগ করতে পারে), আপনি কেবল https://www.base64encode.org/ ব্যবহার করতে পারেন ।

একটি ডিভ পটভূমি সেট করার উদাহরণ:

var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>";
var mySVG64 = window.btoa(mySVG);
document.getElementById('myDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";
html, body, #myDiv {
  width: 100%;
  height: 100%;
  margin: 0;
}
<div id="myDiv"></div>
স্নিপেট প্রসারিত করুন

জেএসের সাহায্যে আপনি ফ্লাইতে এসভিজি তৈরি করতে পারেন এমনকি এর পরামিতিগুলিও পরিবর্তন করতে পারেন।

এসভিজি ব্যবহার সম্পর্কে আরও ভাল নিবন্ধগুলি এখানে: http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

আশাকরি এটা সাহায্য করবে

মাইক

— মাইক টমমসি
সূত্র
2
ধন্যবাদ মানুষ. বেস 64 নিয়ে সমাধানটি দুর্দান্ত কাজ করেছে, যখন আমি গৃহীত উত্তর নিয়ে সমস্যায় পড়েছি।
— মার্সেল
1
আপনি আমার জীবন বাঁচিয়েছেন। আমার একটি এসভিজি সীমানা চিত্র ছিল যা ক্রোমে কাজ করছে তবে এফএফ-তে নয়। এখন এটা কাজ করছে! : ডি
— পাপিপো
পাশাপাশি আমাকে সহায়তা করেছে (স্বীকৃত উত্তর চেষ্টা করে সময় হারাবার পরে) - এটি অবশ্যই গ্রহণযোগ্য উত্তর হওয়া উচিত।
— কাটাই
এই এখনও আপনার জন্য কাজ না করে তবে - আপনি নিশ্চিত xmlnsকরার জন্য এট্রিবিউট সেট svgউপাদান সামনে তোমার মত করুন Base64- সঙ্কেতাক্ষরে লিখা <svg xmlns="http://www.w3.org/2000/svg">...</svg>ব্রাউজার কখনও কখনও এটি খণ্ড এটা ছাড়া যখন SVG HTML এ সরাসরি - এই হয় না :)
— jave.web
যদি কেউ এখনও 6+ বছর পরেও এই উত্তরটির দিকে তাকাচ্ছে: আপনি সম্ভবত 6464 এসভিজিকে সিএসএস
— ভলকার ই
38

এখনও যারা লড়াই করছেন তাদের জন্য, আমি সমস্ত আধুনিক ব্রাউজারগুলি আইই 11 এবং তার উপরে এই কাজটি পরিচালনা করতে সক্ষম হয়েছি।

বেস 64 আমার পক্ষে কোনও বিকল্প ছিল না কারণ আমি যে কোনও বর্ণের ভিত্তিতে এসভিজি আইকন তৈরি করতে SASS ব্যবহার করতে চেয়েছিলাম। উদাহরণস্বরূপ: @include svg_icon(heart, #FF0000);এইভাবে আমি যে কোনও রঙে একটি নির্দিষ্ট আইকন তৈরি করতে পারি এবং কেবলমাত্র এসএসজি-র আকারটি সিএসএসে একবার এম্বেড করতে হবে। (বেস 64 এর সাথে আপনি ব্যবহার করতে চান এমন প্রতিটি রঙে এসভিজি এম্বেড করতে হবে)

তিনটি বিষয় সম্পর্কে আপনার সচেতন হওয়া দরকার:

  1. ইউআরএল আপনার নিজের এসভিজি এনকোড করুন অন্যরা যেমন পরামর্শ দিয়েছে, আইই 11 এ কাজ করার জন্য আপনাকে URL টি আপনার পুরো এসভিজি স্ট্রিংটি এনকোড করা দরকার। আমার ক্ষেত্রে, আমি যেমন মাঠে রঙ মানগুলি বাদ fill="#00FF00"এবং stroke="#FF0000"থাকেন এবং তাদেরকে একটি Sass পরিবর্তনশীল দিয়ে প্রতিস্থাপিত fill="#{$color-rgb}"তাই এই রঙ আমি চাই সঙ্গে প্রতিস্থাপিত হতে পারে। আপনি যে কোনও অনলাইন রূপান্তরকারীকে ইউআরএল থেকে বাকী স্ট্রিং ব্যবহার করতে পারেন । আপনি এই জাতীয় একটি এসভিজি স্ট্রিং দিয়ে শেষ করবেন:

    % 3Csvg% 20xmlns% 3D% 27http% 3A% 2F% 2Fwww.w3.org% 2F2000% 2Fsvg% 27% 20viewBox% 3D% 270% 200% 20494,572% 20494,572% 27% 20width% 3D% 27512% 27% 20height% 3D % 27512% 27% 3E% 0A% 20% 20% 3Cpath% 20D% 3D% 27M257.063% 200C127.136% 200% 2021,808% 20105,33% 2021,808% 20235.266c0% 2041,012% 2010,535% 2079,541% 2028,973% 20113.104L3.825 % 20464.586c345% 2012.797% 2041.813% 2012.797% 2015.467% 200% 2029.872-4.721% 2041.813-12.797v158.184z% 27% 20fill% 3D% 27 # {$ রঙ- আরজিবি 27% 27% 2F% 3E% 3C% 2Fsvg% 3E

  1. ডেটা ইউআরএলটিতে ইউটিএফ 8 চিঠিটি ছেড়ে দিন আপনার ডেটা ইউআরএল তৈরি করার সময়, আইই 11 এ কাজ করার জন্য আপনার চরসেটটি ছাড়তে হবে।

    না পটভূমি চিত্র: URL (ডাটা: চিত্র / SVG + XML; UTF-8,% 3Csvg% 2 ....)
    কিন্তু পটভূমি চিত্র: URL (ডাটা: চিত্র / SVG + XML,% 3Csvg% 2 ... ।)

  1. আরজিবি () ইনস্টল করুন হেক্স রঙের ফায়ারফক্স এসভিজি কোডে # পছন্দ করে না। সুতরাং আপনাকে আরজিবিতে আপনার রঙিন হেক্স মানগুলি প্রতিস্থাপন করতে হবে।

    না পূরণ = "# ff0000"
    কিন্তু ভরাট = "RGB (255,0,0)"

আমার ক্ষেত্রে আমি প্রদত্ত হেক্সকে একটি বৈধ আরজিবি মান রূপান্তর করতে SASS ব্যবহার করি। মন্তব্যে নির্দেশিত হিসাবে, ইউআরএলটি আপনার আরজিবি স্ট্রিংটিকে এনকোড করা ভাল (সুতরাং কমাটি% 2 সি হয়)

@mixin svg_icon($id, $color) {
   $color-rgb: "rgb(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + ")";
   @if $id == heart {
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%204%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E');
   }
}

আমি বুঝতে পারি এটি খুব জটিল এসভিজির জন্য সেরা সমাধান হতে পারে না (ইনলাইন এসভিজি কখনই সে ক্ষেত্রে হয় না), তবে কেবল কয়েকটি রঙযুক্ত ফ্ল্যাট আইকনগুলির জন্য এটি সত্যিই দুর্দান্ত কাজ করে।

আমি একটি সম্পূর্ণ স্প্রিট বিটম্যাপটি ছেড়ে দিতে সক্ষম করেছিলাম এবং এটি আমার সিএসএসে ইনলাইন এসভিজি দিয়ে প্রতিস্থাপন করতে পেরেছি, যা সংকোচনের পরে কেবল 25 কেবি হতে পারে। সুতরাং আপনার সিএসএস ফাইলটি ফোটানো ছাড়াই আপনার সাইটের কতগুলি অনুরোধ করা উচিত তা সীমাবদ্ধ করার এক দুর্দান্ত উপায়।

— ডেভি বায়ার্ট
সূত্র
1
বিটিডব্লিউ, আমি ভুল হলে আমাকে সংশোধন করুন তবে একবার এনকোড rgb(255,0,0)হওয়া উচিত rgb(255%2C0%2C0)।
— ক্যাপসুল
1
আমি বুঝিয়েছি যে আমি আরজিবি স্ট্রিংটি এনকোড করি না এবং এটি এখনও কার্যকর হয়। আপনি যেমন উল্লেখ করেছেন তেমন এনকোডিং করা সম্ভবত আরও ভাল।
— ডেভি বাইয়ার্ট
1
ভাল, আসলে, আমি ফায়ারফক্স%23ff0000#ff0000
— ক্যাপট্রে
1
@ ক্যাপসুল আমি জানি না কী হচ্ছে, তবে% 23ff0000 কেবলমাত্র পদ্ধতি যা ক্রোম এবং এফএফ উভয়ের জন্যই আমার পক্ষে কাজ করে works # ff0000 কাজ করে না, এবং আরজিবি (255,0,0) এবং আরজিবি (255% 2C0% 2C0) পদ্ধতিগুলিও করে না।
— আইডিয়গ্রাম
1
একটি পদ্ধতি (এসসিএসএস কোড সহ) এর জন্য কম এনকোডিং প্রয়োজন: কোডেপেন.ইও
— জাকোব-
26

ম্যাক / লিনাক্সে, আপনি সহজেই এই সাধারণ ব্যাশ কমান্ডের সাহায্যে সিএসএস ব্যাকগ্রাউন্ড অ্যাট্রিবিউটের জন্য বেসভি 64 এনকোডড মানটিতে একটি এসভিজি ফাইলকে সহজেই রূপান্তর করতে পারেন:

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

ম্যাক ওএস এক্সে পরীক্ষা করা হয়েছে This

মনে রাখবেন যে বেস 64 একটি এনভিডিং এসভিজি ফাইলের আকার বাড়িয়ে দেয়, সিএসএস- কৌশলগুলি ব্লগ পোস্ট দেখুন ।

— araks
সূত্র
2
পাঠকদের উদ্দেশ্যে: দয়া করে কেবল ভোট দেওয়ার পরিবর্তে আপনার মতামতটি মন্তব্য করুন, যাতে আপনার সহযোগিতায় এই উত্তরটি উন্নত করা যায়! এই জাতীয় প্রশ্নোত্তর সাইটগুলিতে সহযোগিতা অপরিহার্য। ধন্যবাদ!
— আরাক করে
2
@ লরডেক্স আপনার মন্তব্যে প্রদত্ত লিঙ্কটি আমার জবাবের সাথে একই রকম :)
— আহ্বান জানিয়েছে
10

আমি একটি কোডপেন ডেমো কাঁটাচামচ করেছি যা সিএসএসে ইনলাইন এসভিজি এম্বেড করার ক্ষেত্রে একই সমস্যা ছিল। এসসিএসএসের সাথে কাজ করে এমন একটি সমাধান হ'ল একটি সাধারণ ইউআরএল-এনকোডিং ফাংশন তৈরি করা।

একটি স্ট্রিং প্রতিস্থাপন ফাংশনটি অন্তর্নির্মিত আরআর-স্লাইস, টিআর-ইনডেক্স ফাংশনগুলি থেকে তৈরি করা যেতে পারে ( সিএসএস-কৌশলগুলি দেখুন see আরআর , হুগো জিরাডেলের ধন্যবাদ) ।

তারপর, শুধু প্রতিস্থাপন %, <, >, ", ', সঙ্গে %xxকোড:

@function svg-inline($string){
  $result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  $result: str-replace($result, '%', '%25');
  $result: str-replace($result, '"', '%22');
  $result: str-replace($result, "'", '%27');
  $result: str-replace($result, ' ', '%20');
  $result: str-replace($result, '<', '%3C');
  $result: str-replace($result, '>', '%3E');
  @return "data:image/svg+xml;utf8," + $result;
}

$mySVG: svg-inline("<svg>...</svg>");

html {
  height: 100vh;
  background: url($mySVG) 50% no-repeat;
}

এখানে আরো একটা image-inlineকমপাসে সহায়ক ফাংশনও রয়েছে তবে এটি কোডপেনে সমর্থিত না হওয়ায় সম্ভবত এই সমাধানটি কার্যকর হতে পারে।

কোডপেনে ডেমো: http://codepen.io/terabaud/details/PZdaJo/

— লেয়া রোজমা
সূত্র
1
আমি এমন একটি কলমও তৈরি করেছি যা আপনাকে svg স্ট্রিংগুলিকে যথাযথ CSS ব্যাকগ্রাউন্ড মানতে রূপান্তর করতে দেয়: s.codepen.io/LukyVj/debug/693cbcc30258bf67b8c30047cce060eb সুতরাং, মূলত, আপনি <svg><path></svg>উপরের টেক্সটরিয়ায় পেস্ট করুন এবং এটি সরাসরি স্যানিটাইজড পাথ আউটপুট করবে একটি url()মান মধ্যে।
— LukyVj
1
এটি দুর্দান্ত কাজ করেছে। ধন্যবাদ. এক নোট. আইই তে কাজ করার জন্য আপনাকে চার্সেট = utf8 ব্যবহার করতে হবে।
— ড্যানিয়েল
4

তৃতীয় পক্ষের উত্স থেকে আগত ইনলাইন এসভিজি (গুগল চার্টের মতো xmlns="http://www.w3.org/2000/svg") এসভিজি উপাদানগুলিতে এক্সএমএল নেমস্পেস অ্যাট্রিবিউট ( ) নাও থাকতে পারে (বা এসভিজি রেন্ডার হওয়ার পরে এটি সরিয়ে দেওয়া হতে পারে - ব্রাউজার কনসোল থেকে ব্রাউজার পরিদর্শক বা জিকুয়েরি কমান্ডগুলি এসভিজি উপাদানটিতে নাম স্থানটি দেখায় না)।

যখন আপনার অন্যান্য প্রয়োজনগুলির জন্য এই এসভিজি স্নিপেটগুলি পুনরায় উদ্দেশ্য করতে হবে (সিএসএসে ব্যাকগ্রাউন্ড-চিত্র বা এইচটিএমএল-এ img উপাদান) অনুপস্থিত নেমস্পেসের জন্য নজর রাখুন। নেমস্পেস ছাড়া ব্রাউজারগুলি এসভিজি প্রদর্শন করতে অস্বীকার করতে পারে (এনকোডিং utf8 বা বেস 64 নির্বিশেষে)।

— mp31415
সূত্র
4

এসভিজির জন্য আমি একটি সমাধান পেয়েছি। তবে এটি কেবল ওয়েবকিতের জন্যই কাজ, আমি আপনার সাথে আমার কাজের অংশটি ভাগ করতে চাই। আমার উদাহরণে দেখানো হয়েছে কীভাবে ডিওএম থেকে এসভিজি উপাদানটি ফিল্টারের মাধ্যমে পটভূমি হিসাবে ব্যবহার করতে হয় (পটভূমি-চিত্র: ইউআরএল ('# গ্লাইফ') কাজ করছে না)।

এই এসভিজি আইকন রেন্ডারের জন্য প্রয়োজনীয় বৈশিষ্ট্যগুলি:

  1. সিএসএস ব্যবহার করে এইচটিএমএল উপাদানগুলিতে এসভিজি ফিল্টার প্রভাব প্রয়োগ করা (আইই এবং এজ সমর্থন করে না)
  2. ফিজিম্যাজ টুকরা লোড সমর্থন (ফায়ারফক্স সমর্থন করে না)

.test {
  /*  background-image: url('#glyph');
    background-size:100% 100%;*/
    filter: url(#image); 
    height:100px;
    width:100px;
}
.test:before {
   display:block;
   content:'';
   color:transparent;
}
.test2{
  width:100px;
  height:100px;
}
.test2:before {
   display:block;
   content:'';
   color:transparent;
   filter: url(#image); 
   height:100px;
   width:100px;
}
<svg style="height:0;width:0;" version="1.1" viewbox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
     <g id="glyph">
          <path id="heart" d="M100 34.976c0 8.434-3.635 16.019-9.423 21.274h0.048l-31.25 31.25c-3.125 3.125-6.25 6.25-9.375 6.25s-6.25-3.125-9.375-6.25l-31.202-31.25c-5.788-5.255-9.423-12.84-9.423-21.274 0-15.865 12.861-28.726 28.726-28.726 8.434 0 16.019 3.635 21.274 9.423 5.255-5.788 12.84-9.423 21.274-9.423 15.865 0 28.726 12.861 28.726 28.726z" fill="crimson"/>
     </g>
    <svg id="resized-glyph"  x="0%" y="0%" width="24" height="24" viewBox="0 0 100 100" class="icon shape-codepen">
      <use xlink:href="#glyph"></use>
    </svg>
     <filter id="image">
       <feImage xlink:href="#resized-glyph" x="0%" y="0%" width="100%" height="100%" result="res"/>
       <feComposite operator="over" in="res" in2="SourceGraphic"/>
    </filter>
 </defs>
</svg>
<div class="test">
</div>
<div class="test2">
</div>
স্নিপেট প্রসারিত করুন

আর একটি সমাধান, ইউআরএল এনকোড ব্যবহার

var container = document.querySelector(".container");
var svg = document.querySelector("svg");
var svgText = (new XMLSerializer()).serializeToString(svg);
container.style.backgroundImage = `url(data:image/svg+xml;utf8,${encodeURIComponent(svgText)})`;
.container{
  height:50px;
  width:250px;
  display:block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
<svg  height="100" width="500" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
</svg>
<div class="container"></div>
স্নিপেট প্রসারিত করুন

— অ্যালেক্স নিকুলিন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.