html - সিএসএস ইনলাইন SVG




css (5)

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

আমি ভালো কিছু মানে:

.my-class {
  background-image: <svg>...</svg>;
}

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

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

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

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


আমি একটি কোডপেন ডেমো ফর্ক করেছি যা CSS এ ইনলাইন SVG এম্বেড করার মতো একই সমস্যা ছিল। SCSS এর সাথে কাজ করে এমন একটি সমাধান হল একটি সহজ url- এনকোডিং ফাংশন তৈরি করা।

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

তারপরে, % , < , > , " , ' , প্রতিস্থাপন করুন %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/


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

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


ম্যাক / লিনাক্সে, আপনি সহজেই একটি SVG ফাইলকে বেসশিপ এনকোডেড মানতে সিএসএস পটভূমির বৈশিষ্ট্যের জন্য এই সহজ ব্যাশ কমান্ড দিয়ে রূপান্তর করতে পারেন:

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

ম্যাক ওএস এক্স এ পরীক্ষিত। এইভাবে আপনি URL টি এড়িয়ে চলার URL টি এড়াতে পারেন।

মনে রাখবেন বেসভিক এনকোডিং একটি এসভিজি ফাইল তার আকার বাড়ায়, css -tricks.com ব্লগ পোস্ট দেখুন


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

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>");
      }

(উল্লেখ্য যে SVG সামগ্রীটি কাজ করার জন্য url- এ পালিয়ে যেতে হবে, উদাহরণস্বরূপ # %23 দিয়ে প্রতিস্থাপিত হয়।)

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





svg