ব্যাকগ্রাউন্ড-চিত্র হিসাবে পরিবেশিত হওয়ার সময় এসভিজি ফিল রঙটি সংশোধন করুন

Question

এসভিজি আউটপুটটি পৃষ্ঠা কোডের সাথে সরাসরি ইনলাইন স্থাপন করে আমি সিএসএসের সাথে ভরাট রঙগুলি কেবল পরিবর্তন করতে সক্ষম হয়েছি:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

এটি দুর্দান্ত কাজ করে, তবে আমি যখন কোনও ব্যাকগ্রাউন্ড-চিত্র হিসাবে পরিবেশন করা হয় তখন কোনও এসভিজির "ফিল" বৈশিষ্ট্যটি সংশোধন করার উপায় খুঁজছি।

html {      
    background-image: url(../img/bg.svg);
}

আমি এখন রঙগুলি কীভাবে পরিবর্তন করতে পারি? এটা কি সম্ভব?

রেফারেন্সের জন্য, এখানে আমার বাহ্যিক এসভিজি ফাইলের সামগ্রীগুলি রয়েছে:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

Comments

আমি আমার উত্তরের প্রপসগুলি প্রায়শই আঘাত করি। আপনার এটি গ্রহণযোগ্য উত্তরে পরিবর্তন করার কথা বিবেচনা করা উচিত যাতে এটি মিস না হয়।

— রায়ান

Answer 1

এটি করার একটি উপায় হ'ল কিছু সার্ভার সাইড মেকানিজম থেকে আপনার এসভিজি পরিবেশন করা। কেবল এমন একটি উত্স সার্ভার সাইড তৈরি করুন যা আপনার এসইটিজিকে জিইটি প্যারামিটার অনুসারে ফলাফল দেয় এবং আপনি এটি নির্দিষ্ট url এ পরিবেশন করেন।

তারপরে আপনি সেই URLটি আপনার CSS এ ব্যবহার করুন।

কারণ একটি পটভূমি ইমগ হিসাবে, এটি ডোমের অংশ নয় এবং আপনি এটিকে পরিচালনা করতে পারবেন না। আরেকটি সম্ভাবনা হ'ল এটি নিয়মিতভাবে ব্যবহার করা, এটিকে একটি সাধারণ পাতায় এম্বেড করা, তবে একে একে একে একে পুরোপুরি প্রস্থ এবং উচ্চতা তৈরি করুন এবং তারপরে জেড-ইনডেক্স সিএসএস সম্পত্তিটি অন্য সমস্ত ডিওএম উপাদানগুলির পিছনে রাখার জন্য ব্যবহার করুন to একটি পৃষ্ঠায়।

Comments

আপনি কোনও সার্ভার-সাইড স্ক্রিপ্ট থেকে এসভিজি পরিবেশন করছেন কিনা তা ভুলে যাবেন না, আপনি সঠিক এমআইএমই শিরোনামটিও প্রেরণ করেছেন কিনা তা নিশ্চিত করার জন্য ভুলবেন না । পিএইচপি-তে এটি হবে:<?php header('Content-type: image/svg+xml'); ?>

— শৌল ফাউটলি

আপনি এসজিজি চিত্রটি মুখোশ হিসাবে ব্যবহার করতে পারেন এবং উপাদানটির পটভূমির রঙটি পরিচালনা করতে পারেন। এটি পূরণ করার পরিবর্তে একই প্রভাব ফেলবে। (বিস্তারিত উত্তর সরবরাহ করা হয়েছে)

— আগস্টকে প্রশস্ত করা হয়েছে

এই উত্তরটি ২০১২ সালের হিসাবে দুর্দান্ত ছিল, তবে এখন সিএসএস মুখোশ এবং / অথবা ফিল্টারগুলি কিছু সময়ের জন্য সমস্ত ব্রাউজারে সমর্থিত হয়েছে। আমি সুপারিশ করছি যে এখন যে কেউ এটি পড়ছেন তার নীচে বিভক্তদের উত্তরের লিঙ্কগুলি পরীক্ষা করে দেখুন বা কেবল এখানে সিএসএস মাস্কগুলিতে চলে যান , এটি একটি খুব সহজ সমাধান - নোটের জন্য এখনও বিধি-বিধানের 2 সংস্করণ প্রয়োজন বলে মনে করেন সময়। মাইক্রোসফ্ট এজের জন্য, বর্তমানে সিএসএস ফিল্টারগুলি সমর্থিত তবে এখনও মুখোশ নয়।

— জোয়েলহারডি

আজকাল কাজ করার মতো অনেকগুলি সমাধান রয়েছে, আমি সম্মত এই উত্তরটি এখনকার সম্ভাবনার বর্তমান অবস্থা প্রতিফলিত করে না।

— ডেভিড নেটো

Answer 2

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

কম মিশ্রণ:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

কম ব্যবহার:

.element-color(#fff);

---

এসসিএসএস মেশিন:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

এসসিএসএস ব্যবহার:

@include element-color(#fff);

---

সিএসএস:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

---

আপনার সিএসএস ফাইলে পূর্ণ এসভিজি কোড এম্বেড করার বিষয়ে আরও তথ্য এখানে রয়েছে । এটি ব্রাউজারের সামঞ্জস্যতার কথাও উল্লেখ করেছে যা এটি একটি কার্যকর বিকল্প হিসাবে হতে কিছুটা ছোট।

Comments

যদিও কিছুটা ওভারহেড রয়েছে, কারণ আমাকে সমস্ত এসভিজি আইটেমগুলিকে হার্ডকোড করতে হয়েছে, আমি মনে করি এটি একটি সময়ের জন্য সেরা সমাধান। ধন্যবাদ

— অ্যাড্রিয়ানো রোসা

আপনি যদি এইভাবে ব্যবহার করতে চান তবে আপনাকে এসএসএস বা কমের মতো সিএসএস প্রিপ্রসেসর ব্যবহার করতে হবে। আপনি যদি একটি ব্যবহার না করে থাকেন তবে প্রতিটি রঙের জন্য আপনাকে কেবল সেই ব্যাকগ্রাউন্ড-চিত্র লাইনটি ব্যবহার করতে হবে

— বন্ধুত্বপূর্ণ কোড

নোট করুন যে #ফায়ারফক্সে এই কাজটি করার জন্য আপনাকে আপনার হেক্স রঙের চরিত্রটি ইউলিংকোড করতে হবে । তাই কিছু <svg fill="#ffffff" ...></svg>হয়ে যায় <svg fill="%23ffffff" ...></svg>।

— সোয়েন

মিষ্টি পদ্ধতি। আপনার কি সেই মতো ব্যাকগ্রাউন্ড-ইমেজে এসভিজিটিকে শক্তভাবে এনকোড করতে হবে? আপনি কি কোনওভাবে এটির সাথে লিঙ্ক করতে পারবেন না?

— লুক

আমি এই সাইটটি আপনাকে ব্যবহারের জন্য নিখুঁত এনকোডযুক্ত URL দেওয়ার জন্য দরকারী বলে মনে করেছি: yoksel.github.io/url-encoder - কেবল এতে এসভিজি কোডটি অনুলিপি করুন এবং প্রত্যাবর্তিত CSS :-)

— বন্ধুত্বপূর্ণ কোড

Answer 3

আপনি সিএসএস মুখোশ ব্যবহার করতে পারেন, 'মাস্ক' বৈশিষ্ট্য সহ, আপনি একটি মাস্ক তৈরি করেন যা কোনও উপাদানকে প্রয়োগ করা হয়।

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

আরও দুর্দান্ত এই নিবন্ধটি দেখুন: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Comments

এটি ভাল তবে যখন কোনও ইনপুট ক্ষেত্রের মধ্যে একটি আইকন প্রয়োগ করা হয় তখন সমস্ত ইনপুট পাঠ্য গোপন থাকে।

— 12:58

IE- এ সমর্থিত নয়

— কারিম

দুর্দান্ত শীতল উত্তর, তবে আপনি আর কোনও পটভূমির রঙ বা অন্য কিছুতে ব্যাকগ্রাউন্ডের রঙ ব্যবহার করতে পারবেন না

— পল ক্রুগার

এটি মোটামুটিভাবে

— ক্রিস মোসচিনি

গ্রীষ্ম 2019: এই গ্রহের 94% ব্রাউজারগুলি "মুখোশ-চিত্র" বা "-উবকিট-মাস্ক-চিত্র" শৈলী সমর্থন করে

— দিমিত্রি কুলাহিন

Answer 4

তবুও অন্য পদ্ধতির মুখোশ ব্যবহার করা হয়। তারপরে আপনি মুখোশযুক্ত উপাদানটির পটভূমি রঙ পরিবর্তন করুন। এটি svg এর পূরণ বৈশিষ্ট্য পরিবর্তন করার মতো একই প্রভাব ফেলে।

এইচটিএমএল:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

সিএসএস:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

আপনি এখানে একটি সম্পূর্ণ টিউটোরিয়াল পাবেন: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (আমার নিজস্ব নয়)। এটি বিভিন্ন পদ্ধতির প্রস্তাব দেয় (মুখোশের মধ্যে সীমাবদ্ধ নয়)।

Comments

এটিতে একটি বিষয় লক্ষ্যণীয় হ'ল ব্রাউজার সমর্থন। আমি বিশ্বাস করি IE (যথারীতি) এর পিছনে রয়েছে।

— ম্যাথু জনসন

দুর্ভাগ্যক্রমে maskIE বা এজ দ্বারা সমর্থিত নয়: caniuse.com/#search=mask

— alpipego

ক্রোমেও আমার পক্ষে কাজ করছে না। সম্পাদনা: ওহ এনভিএম ... আমার অটোপ্রিফিক্স সক্ষম নেই। আমি ভেবেছিলাম বিক্রেতাদের উপসর্গ ব্যবহার বন্ধ করা উচিত ?!

— এমপেন

সর্বশেষ ক্রোম এবং ফায়ারফক্সে কাজ করে

— টিক দিন

Answer 5

সাসের সাথে এটা সম্ভব! আপনাকে কেবলমাত্র যা করতে হবে তা হল আপনার এসভিজি কোডটি ইউআরএল-এনকোড করা। এবং সাসে একটি সহায়ক ফাংশন দিয়ে এটি সম্ভব। আমি এই জন্য একটি কোডপেন তৈরি করেছি। এটা দেখ:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

Comments

এটি খুব ভাল কাজ করে। শুধু সমস্যা: ইন IE10 আইকন পথ খুবই ছোট (আমার ধারণা দেওয়া আকার 10%।

— Henning ফিসার

Answer 6

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

কোডবেন নিবন্ধ এবং ডেমো

Comments

এই পদ্ধতিটি শিশু সহ পুরো সামগ্রীতে ফিল্টার প্রয়োগ করবে।

— ক্রিজিসটফ আন্তোনিয়াক

Answer 7

আপনার এসজিজি পাঠ্য হিসাবে ডাউনলোড করুন।

পেইন্ট / স্ট্রোক / ভরাট রঙ [গুলি] পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করে আপনার এসভিজি পাঠ্য সংশোধন করুন।

তারপরে এখানে বর্ণিত হিসাবে আপনার সিএসএসে পরিবর্তিত এসভিজি স্ট্রিংটি ইনলাইন এম্বেড করুন ।

Answer 8

এখন আপনি এটি ক্লায়েন্ট পক্ষের মতো এটি অর্জন করতে পারেন:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

ফিডল এখানে!

Comments

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

— inta

এই এনকোডিংটি ক্লায়েন্টের পক্ষে ঘটছে, সম্ভবত পুরোপুরি পালানোর জন্য ...

— ডায়াডেলিক

আপনি জেএস এর সাথে কিছু করতে পারবেন না বলেই চলে যায়। কথাটি হ'ল জেএস এড়ানো।

— মার্সএন্ডব্যাক

Answer 9

আপনি একটি পরিবর্তনশীল মধ্যে এসভিজি সঞ্চয় করতে পারেন। তারপরে আপনার প্রয়োজনের উপর ভিত্তি করে এসভিজি স্ট্রিংটি হেরফের করুন (যেমন, প্রস্থ, উচ্চতা, রঙ ইত্যাদি)। তারপরে ফলাফলটি পটভূমি সেট করতে ব্যবহার করুন, যেমন

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

আমি একটি ডেমোও তৈরি করেছি, http://sassmeister.com/gist/4cf0265c5d0143a9e734 ।

এই কোডটি এসভিজি সম্পর্কে কয়েকটি অনুমান করে, যেমন: <svg />উপাদানটির কোনও বিদ্যমান পূরণের রঙ নেই এবং প্রস্থ বা উচ্চতার বৈশিষ্ট্যও সেট করা নেই। এসসিএসএস নথিতে ইনপুটটি হার্ডকোডযুক্ত হওয়ায় এই সীমাবদ্ধতাগুলি প্রয়োগ করা বেশ সহজ।

কোড সদৃশ সম্পর্কে চিন্তা করবেন না। gzip, সংক্ষিপ্তকরণ পার্থক্যকে নগন্য করে তোলে।

Comments

সদৃশ কোড একটি কোড গন্ধ তাই পরামর্শ দেওয়া লোকেরা আপনার উদাহরণের ক্ষেত্রে সদৃশ কোড সম্পর্কে উদ্বিগ্ন হওয়া উচিত নয় এটি ভাল ধারণা নয়, তবে এটি বলেছে যে আপনার কোডটি কোথায় নকল হয়েছে আমি তা দেখতে পাচ্ছি না? আমি মনে করি আপনি যদি পুরোপুরি মন্তব্যটি সরিয়ে ফেলেন তবে এটি আরও ভাল পড়তে পারে।

— প্রোগ্রামিং এর অধ্যাপক

Answer 10

আপনি এটির জন্য নিজের এসসিএসএস ফাংশন তৈরি করতে পারেন। আপনার কনফিগার.আরবি ফাইলটিতে নিম্নলিখিতগুলি যুক্ত করা হচ্ছে।

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

তারপরে আপনি এটি আপনার সিএসএসে ব্যবহার করতে পারেন:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

আপনাকে আপনার এসভিজি ফাইলগুলি সম্পাদনা করতে হবে এবং মার্ক = "ভরাট" "রঙ}" দিয়ে কোনও পূরণের বৈশিষ্ট্যগুলি প্রতিস্থাপন করতে হবে

আইকন পথটি সর্বদা একই config.rb ফাইলটিতে আপনার চিত্র_ডির প্যারামিটারের সাথে সম্পর্কিত।

অন্যান্য কয়েকটি সমাধানের মতো, তবে এটি বেশ পরিষ্কার এবং আপনার এসসিএসএস ফাইলগুলিকে পরিপাটি করে রাখে!

Comments

এটি একটি গিথুব-ইস্যু থেকে । কেউ এখানে আলোচনাটি পড়তে চাইলে কেবল এখানে এটি উল্লেখ করে

— এম ম্যাচাইনগুন

Answer 11

কিছু (খুব নির্দিষ্ট) পরিস্থিতিতে ফিল্টার ব্যবহার করে এটি অর্জন করা যেতে পারে । উদাহরণস্বরূপ, আপনি হিউ 45 ডিগ্রি ব্যবহার করে নীল এসভিজি চিত্রটি বেগুনি করে পরিবর্তন করতে পারেন filter: hue-rotate(45deg);। ব্রাউজার সমর্থন ন্যূনতম তবে এটি এখনও একটি আকর্ষণীয় কৌশল।

ডেমো

Answer 12

একরঙা ব্যাকগ্রাউন্ডের জন্য আপনি একটি মাস্ক সহ একটি এসভিজি ব্যবহার করতে পারেন, যেখানে পটভূমির রঙ প্রদর্শিত হবে

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

এবং এই CSS ব্যবহার না করে

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);

Answer 13

আমরা চাই যে কোনও রঙ তৈরি করতে হিউ-ঘোরানো, উজ্জ্বলতা এবং স্যাচুরেশনের সাথে সেপিয়া ফিল্টারটি ব্যবহার করুন।

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

Answer 14

এখানে প্রদর্শনীর শেষদিকে, তবে আমি এসভিজি বহুভুজটিতে একটি পূর্ণ রঙ যুক্ত করতে সক্ষম হয়েছি, আপনি যদি সরাসরি এসভিজি কোড সম্পাদনা করতে সক্ষম হন, তবে উদাহরণস্বরূপ নিম্নলিখিত ডিগ্রি ডিফল্ট কালোটির পরিবর্তে লালকে রেন্ডার করে। যদিও আমি Chrome এর বাইরে পরীক্ষা করিনি:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

Answer 15

এটি আমার প্রিয় পদ্ধতি, তবে আপনার ব্রাউজার সমর্থনটি অবশ্যই খুব প্রগতিশীল হবে। মুখোশ সম্পত্তি হিসাবে আপনি একটি মাস্ক তৈরি করুন যা একটি উপাদান প্রয়োগ করা হয়। যেদিকেই মুখোশটি অস্বচ্ছ বা শক্ত, অন্তর্নিহিত চিত্রটি দেখায়। যেখানে এটি স্বচ্ছ, অন্তর্নিহিত চিত্রটি মুখোশযুক্ত বা লুকানো। সিএসএস মাস্ক-চিত্রের বাক্য গঠনটি ব্যাকগ্রাউন্ড-চিত্রের মতো। কোডেপেন দেখুনmask

Answer 16

প্রচুর আইএফ, তবে যদি আপনার পূর্ব বেস 64 এনকোডড এসভিজি শুরু হয়:

<svg fill="#000000

তারপরে বেস 64 এনকোডড স্ট্রিংটি শুরু হবে:

PHN2ZyBmaWxsPSIjMDAwMDAw

যদি প্রাক-এনকোড করা স্ট্রিংটি শুরু হয়:

<svg fill="#bfa76e

তারপরে এই এনকোডগুলি:

PHN2ZyBmaWxsPSIjYmZhNzZl

উভয় এনকোডযুক্ত স্ট্রিং একই শুরু:

PHN2ZyBmaWxsPSIj

বেস64 64 এনকোডিংয়ের গতিপথ প্রতি 3 ইনপুট অক্ষর 4 আউটপুট অক্ষরে পরিণত হয়। এসভিজি এভাবে শুরু হওয়ার সাথে সাথে 6-অক্ষরের হেক্স ফিল ফিল্ড ঠিক একটি এনকোডিং ব্লক 'সীমানা' থেকে শুরু হয়। সুতরাং আপনি সহজেই একটি ক্রস ব্রাউজার জেএস প্রতিস্থাপন করতে পারেন:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

তবে উপরের টিএনটি-রক্স উত্তরটি এগিয়ে যাওয়ার উপায় to