কীভাবে একটি এসভিজি উপাদানটির রঙ পরিবর্তন করবেন?


349

আমি এই কৌশলটি http://css-tricks.com/svg-fallbacks/ ব্যবহার করতে এবং এসভিজি রঙটি পরিবর্তন করতে চাই তবে এখন পর্যন্ত আমি এটি করতে সক্ষম হইনি। আমি এটি সিএসএসে রেখেছি তবে আমার ইমেজ সর্বদা কালো, যাই হোক না কেন। আমার কোড:

.change-my-color {
  fill: green;
}
<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>


আমি কোনও এসজিজি বিশেষজ্ঞ নই, তবে আপনি কি ব্যাকগ্রাউন্ড-রঙে পরিবর্তনের চেষ্টা করেছেন?
মেগ

@ এসজিজি ব্যাকগ্রাউন্ড-রঙের মেগান 'ফিল' সম্পত্তি এবং 'স্ট্রোক' এর সীমানা (যেমন আপনি ইলাস্ট্রেটারে করতে চান) দিয়ে সুনির্দিষ্ট করা হয়। w3.org/TR/SVG/propidx.html
বার্বারা

4
আপনার এইচটিএমএল ডকুমেন্ট থেকে সিএসএস <img />
প্যাভেল

1
এটা এখন সম্ভব। এখানে সহজ এবং কার্যকরী উত্তর: stackoverflow.com/a/53336754/467240
mtyson

উত্তর:


188

আপনি সেভাবে কোনও চিত্রের রঙ পরিবর্তন করতে পারবেন না। আপনি যদি কোনও চিত্র হিসাবে এসভিজি লোড করেন তবে আপনি ব্রাউজারে সিএসএস বা জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে এটি প্রদর্শিত হয় তা পরিবর্তন করতে পারবেন না।

আপনি আপনার SVG চিত্র পরিবর্তন করতে চান, তাহলে আপনি এটি ব্যবহার লোড করতে আছে <object>, <iframe>বা ব্যবহার <svg>ইনলাইন।

আপনি যদি পৃষ্ঠায় কৌশলগুলি ব্যবহার করতে চান তবে আপনার মডার্নিজার লাইব্রেরি প্রয়োজন, যেখানে আপনি এসভিজি সহায়তা এবং শর্তসাপেক্ষে ফ্যালব্যাক চিত্রটি প্রদর্শন করতে বা না পরীক্ষা করতে পারেন। তারপরে আপনি আপনার এসভিজিকে ইনলাইন করতে পারেন এবং আপনার প্রয়োজনীয় স্টাইলগুলি প্রয়োগ করতে পারেন।

দেখা :

আপনি আপনার এসভিজিকে ইনলাইন করতে পারেন, শ্রেণিকাল নাম ( my-svg-alternate) দিয়ে আপনার ফ্যালব্যাক চিত্রটি ট্যাগ করতে পারেন :

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

এবং সিএসএসে এসডিজি সমর্থন পরীক্ষা করার জন্য no-svgমডার্নাইজার (সিডিএন: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) থেকে শ্রেণিটি ব্যবহার করুন । যদি কোনও এসভিজি সমর্থন না থাকে তবে এসভিজি ব্লকটিকে উপেক্ষা করা হবে এবং চিত্রটি প্রদর্শিত হবে, অন্যথায় চিত্রটি ডিওএম ট্রি থেকে সরানো হবে ( display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

তারপরে আপনি আপনার অন্তর্ভুক্ত উপাদানটির রঙ পরিবর্তন করতে পারেন:

#time-3-icon {
   fill: green;
}

5
আপনি objectহোস্টিং ডকুমেন্ট থেকে এম্বেড করা এসভিজিকে স্টাইল করতে পারবেন না ।
জাভিয়ের রে

1
@ জাভিয়েরে আপনি জাভাস্ক্রিপ্টের মাধ্যমে অবজেক্ট ট্যাগের বিষয়বস্তুতে স্টাইলিং ইনজেক্ট করতে পারেন। তবে আপনি ঠিক বলেছেন যে আপনি কেবল এটি হোস্টিং নথির স্টাইলশিটে যুক্ত করলে এটি প্রয়োগ হয় না।
রবার্ট লঙ্গসন

2
আমি @ মণীশ-মেনারিয়া থেকে সমাধানটি ব্যবহার করছি এবং এটি পুরোপুরি কার্যকর।
রায়ান এলিস

1
: গৃহীত উত্তর পরিবর্তন করা উচিত stackoverflow.com/a/53336754/467240
mtyson

374

2020 উত্তর

সিএসএস ফিল্টার সমস্ত বর্তমান ব্রাউজারে কাজ করে

যে কোনও এসভিজির রঙ পরিবর্তন করতে

  1. একটি <img>ট্যাগ ব্যবহার করে এসভিজি চিত্র যুক্ত করুন ।
<img src="dotted-arrow.svg" class="filter-green"/>
  1. একটি নির্দিষ্ট রঙে ফিল্টার করতে, হেক্স রঙের কোডটি একটি সিএসএস ফিল্টারে রূপান্তর করতে নিম্নলিখিত কোডেপেন (কোডপেন খোলার জন্য এখানে ক্লিক করুন) ব্যবহার করুন :

উদাহরণস্বরূপ, আউটপুট #00EE00হয়

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. filterএই ক্লাসে সিএসএস যুক্ত করুন ।
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

5
পুরানো ব্রাউজার সংস্করণগুলিতে সমর্থিত না হওয়া সম্পর্কে এটি যথাযথ সতর্কতার সাথে আসে: বিকাশকারী.মোজিলা.আর
কেভিন ওয়াং

17
কোডপেনে উল্লিখিত হিসাবে, যদি আপনার এসভিজি কালো না হয় (খনিটি ধূসর ছিল), brightness(0) saturate(100%)ফিল্টারগুলির তালিকার শুরুতে যুক্ত করা প্রথমে এটি 100% কালো হয়ে যাবে, যা অন্যান্য ফিল্টারগুলিকে এটি সঠিক রঙে পরিবর্তন করতে সক্ষম করে।
jdunning

2
এছাড়াও, এই স্ট্যাক ওভারফ্লো প্রশ্নটিতে সমাধানের জন্য আকর্ষণীয় পটভূমি যা কোডপেনকে জানিয়েছিল।
jdunning

3
আমার বন্ধু. সমর্থনটি গ্রহণযোগ্য caniuse.com/#feat=css-filters মনে হয় ।
স্যাম ডোজেজ

এত ভালভাবে কাজ করে, আমার হেক্সকে
স্পেন

220

যে কোনও এসভিজির রঙ পরিবর্তন করতে আপনি যে কোনও পাঠ্য সম্পাদককে এসভিজি ফাইলটি খোলার মাধ্যমে সরাসরি এসজিজি কোড পরিবর্তন করতে পারেন । কোডটি নীচের কোডটির মতো দেখাবে

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <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">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

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

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

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


48
কেন শুধু অ্যাট্রিবিউট ব্যবহার করছেন না fillভালো: fill = "#AB7C94"? কেন style
বিশিষ্টতাটির

4
হাই ড্যানিয়েল, হ্যাঁ এটি কাজ করে। আমি জানতাম না যে ফিলটি কোনও গুণ হিসাবে ব্যবহার করা যেতে পারে। আপনার মন্তব্যটি এতক্ষণ না লক্ষ্য করার জন্য দুঃখিত @ bg17aw
sushant047

30

ফিল্টার সেটিংসের মাধ্যমে এসভিজি রঙ করতে - একটি পরীক্ষার পৃষ্ঠা যুক্ত করা হয়েছে

ই জি filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

আপনার এসভিজি - জেসফিডাল আপলোড করুন এবং রঙ করুন

থেকে ধারণাটি গ্রহণ করেছেন: https://blog.union.io/code/2017/08/10/img-svg-fill/


1
ধন্যবাদ, আপনি আমাকে নিজের থেকে বাঁচিয়েছেন। .custom-disabled > svg {filter:invert(0.2) sepia(1) saturte(0) hue-rotate(0);}আইকন অক্ষম করার জন্য আমার প্রয়োজন ঠিক সেই কাজটি করেছে।
রজার

19

পথের তথ্য সহ কেবল এসভিজি । আপনি ইমেজটিতে এটি করতে পারবেন না ... যে পথ হিসাবে আপনি স্ট্রোক পরিবর্তন করতে এবং তথ্য পূরণ করতে পারেন এবং আপনি হয়ে গেছেন। উদাহরণস্বরূপ

সুতরাং: সিএসএসের মাধ্যমে আপনি পাথের fillমানটি ওভাররাইট করতে পারেন

path { fill: orange; }

তবে আপনি যদি আরও নমনীয় উপায় চান তবে আপনি কোনও পাঠ্য দিয়ে এটি পরিবর্তন করতে চান যখন কিছুটা ঘোরাঘুরির প্রভাব চলছে use

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>


12

সবচেয়ে সহজ উপায় হ'ল https://icomoon.io/app/#/select এর মতো একটি পরিষেবা ব্যবহার করে এসভিজি থেকে একটি ফন্ট তৈরি করা বা এর মতো । আপনার এসভিজি আপলোড করুন, "জেনারেট ফন্ট তৈরি করুন" ক্লিক করুন, ফন্ট ফাইল এবং সিএসএস আপনার পাশে অন্তর্ভুক্ত করুন এবং অন্য যে কোনও পাঠ্যের মতো এটি ব্যবহার করুন এবং স্টাইল করুন। আমি সর্বদা এটি ব্যবহার করি কারণ এটি স্টাইলিংকে আরও সহজ করে তোলে।

সম্পাদনা: @ কোডমাউস92 আইকন ফন্টগুলি মন্তব্য করে নিবন্ধে উল্লিখিত পর্দার পাঠকদের মেস আপ করে (এবং সম্ভবত এসইওর পক্ষে খারাপ)। বরং এসভিজিকে আটকে দিন।


4
এটি পর্দার পাঠকদেরও গোলমাল করে। সেরেন ডেভিস দ্বারা "ডেথ টু আইকন ফন্ট"
কোডমাউস92

7

একটি পটভূমির রঙ সহ একটি বক্স উপাদানগুলিতে এসভিজি মাস্কের ফলাফল হবে:

.icon{
  --size     : 70px;
  display    : inline-block;
  width      : var(--size);
  height     : var(--size);
  transition : .12s;
  -webkit-mask-size: cover;
  mask-size  : cover;
}

.icon-bike{
  background: black;
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg);
  animation: 1s frames infinite ease;
}

@keyframes frames {
  50% { background:red;  }
}
<i class="icon icon-bike" style="--size:150px"></i>


দ্রষ্টব্য - এসভিজি মাস্কগুলি ইন্টারনেট এক্সপ্লোরার ব্রাউজারগুলিতে সমর্থিত নয়


1
অনেক ধন্যবাদ, @ ভাইসেক এটি আমার যা প্রয়োজন তার জন্য সেরা হ্যাক।
ভিকসন

6

আপনি যদি কিছু কৌশল ব্যবহার করেন তবে আপনি সিএসএস দিয়ে এসভিজি রঙিন পরিবর্তন করতে পারেন। আমি তার জন্য একটি ছোট স্ক্রিপ্ট লিখেছিলাম।

  • এসভিজি ইমেজ থাকা উপাদানগুলির একটি তালিকা দিয়ে যান
  • এক্সএমএল হিসাবে এসভিজি ফাইল লোড করুন
  • কেবল এসভিজি অংশ আনুন
  • পথের রঙ পরিবর্তন করুন
  • এসআরসি-কে পরিবর্তিত এসভিজিকে ইনলাইন চিত্র হিসাবে প্রতিস্থাপন করুন
$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

উপরের কোডটি সঠিকভাবে কাজ করছে না, আমি এসভিজি ব্যাকগ্রাউন্ড চিত্রযুক্ত উপাদানগুলির জন্য এটি প্রয়োগ করেছি যা এর সাথে প্রায় একই রকম কাজ করে। তবে যাই হোক না কেন আপনার কেস ফিট করতে আপনাকে এই স্ক্রিপ্টটি পরিবর্তন করতে হবে। আশা করি এটি সাহায্য করেছে


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

2
এটি করা যাবে না বলে বরং সমাধান দেওয়ার জন্য +1। এই উত্তরটি এছাড়াও প্রাসঙ্গিক হল: stackoverflow.com/questions/11978995/...
claytronicon

5

এসভিজি মধ্যে পথ লক্ষ্য করুন:

<svg>
   <path>....
</svg>

আপনি ইনলাইন করতে পারেন, যেমন:

<path fill="#ccc">

অথবা

svg{
   path{
        fill: #ccc


2

আপনি যদি কোনও ইনলাইন এসভিজিতে এটি করতে চান যা উদাহরণস্বরূপ, আপনার সিএসএসের একটি পটভূমি চিত্র:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

অবশ্যই, আপনার ইনলাইন চিত্র কোডের সাথে ... প্রতিস্থাপন করুন


2

উদাহরণস্বরূপ, আপনার এইচটিএমএলে:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

JQuery ব্যবহার করুন:

$("#struct1").css("fill","<desired colour>");

আপনি কেবলমাত্র এইচটিএমএলে এসভিজি ফাইলের ইনলাইন অন্তর্ভুক্ত করলে এটি কাজ করে। এটি পরিষ্কার করার জন্য আমি আপনার উত্তর সম্পাদনা করেছি।
ফ্লিম

0

আসলে, এই সমস্যার একটি আরও নমনীয় সমাধান রয়েছে: একটি ওয়েব উপাদান লিখুন যা রানটাইমগুলিতে এসভিজিটিকে পাঠ্য হিসাবে প্যাচ করবে। এছাড়াও এ প্রকাশিত সারকথা JSFiddle একটি লিঙ্ক সমেত

👍 ফিল্টার: উল্টানো (42%) সেপিয়া (93%) স্যাচুরেট (1352%) হিউ-রোটেট (87deg) উজ্জ্বলতা (119%) বিপরীতে (119%);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta' 
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>

-1

সংক্ষিপ্ততম বুটস্ট্র্যাপ-সামঞ্জস্যপূর্ণ উপায়, কোনও জাভাস্ক্রিপ্ট নেই:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

এবং এটি ব্যবহার করুন:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

-1

ব্রাউজার ব্যবহার করে আপনার চিত্রটি খুলুন, ভিউ পৃষ্ঠা উত্সটিতে চিত্রের উপর ডান ক্লিক করুন এবং আপনি চিত্রটির এসভিজি ট্যাগ দেখতে পাবেন। আপনার এইচটিএমএল এ কপি এবং পেস্ট করুন, তারপরে পূরণটি আপনার পছন্দসই রঙে পরিবর্তন করুন


গৃহীত উত্তর ইতিমধ্যে ইনলাইনিং এবং তারপর সমাধান হিসেবে রঙ সেটিং দাড়ায়।
রবার্ট লঙ্গসন

-1

কেবলমাত্র চিত্রের এসভিজি ট্যাগে পূরণ করুন: "কাঙ্ক্ষিত রঙ" যুক্ত করুন: উদাহরণ:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>


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