img src SVG CSS এর সাথে শৈলীর পরিবর্তন করে

373

এইচটিএমএল

<img src="logo.svg" alt="Logo" class="logo-img">

CSS

.logo-img path {
  fill: #000;
}

উপরের এসভিজি লোড হয় এবং স্থানীয়ভাবে fill: #fffকিন্তু যখন আমি উপরেরটি cssএটি কালোতে পরিবর্তন করার চেষ্টা করি তখন তা পরিবর্তন হয় না, এসভিজির সাথে এটি আমার প্রথমবার খেলছে এবং কেন এটি কাজ করছে না তা আমি নিশ্চিত নই।

css  image  svg 
— ngplayground
সূত্র
25
আপনি এসভিজি চিত্রগুলিকে এর মতো প্রভাবিত করতে পারবেন না ... কেবল ইনলাইন এসভিজি উপাদানগুলি
— পাওলি_ডি
1
— Icarus
এসভিজি এবং সিএসএসের সামগ্রীগুলি ব্যবহার করতে আমার উত্তরটি এখানে দেখুন। stackoverflow.com/questions/11978995/…
— বেনিয়ামিন
3
— بدل-

উত্তর:

154

যদি আপনার লক্ষ্যটি কেবলমাত্র লোগোর রঙ পরিবর্তন করা হয়, এবং আপনার সিএসএস ব্যবহার করার প্রয়োজন হয় না, তবে পূর্ববর্তী কিছু উত্তরের পরামর্শ অনুসারে জাভাস্ক্রিপ্ট বা jquery ব্যবহার করবেন না।

মূল প্রশ্নের যথাযথভাবে উত্তর দিতে, ঠিক:

  1. logo.svgএকটি পাঠ্য সম্পাদক এ আপনার খুলুন ।

  2. এটি সন্ধান করুন fill: #fffএবং এর সাথে প্রতিস্থাপন করুনfill: #000

উদাহরণস্বরূপ, logo.svgকোনও পাঠ্য সম্পাদকটিতে খোলার সময় আপনার এ জাতীয় দেখতে পাওয়া যেতে পারে:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... কেবল পূরণ করুন এবং সংরক্ষণ করুন।

— রোউ মোরেহাউস
সূত্র
6
... এবং যদি "ফিল" না থাকে তবে আপনি কেবল এটি পছন্দসই pathবা circleআইটেমগুলিতে যুক্ত করতে পারেন <path fill="#777777" d="m129.774,74.409c-5.523,...।
— সেক্স
1
আমার লোগোর শিরোনামের এক রঙ এবং পাদলেখের অন্য রঙ থাকলে কী হবে?
— রুবনেস.লপস
। @ দুটি ভিন্ন ফাইল, অথবা দুটি ভিন্ন inlines ruben.lopes সহজ হবে
— রো Morehouse
11
আপনি fill="currentColor"তারপর ব্যবহার করতে পারেন পিতামণ্ডুলcolor উপাদান সিএসএস- কৌশলগুলি: caccasing
— সার্জ
10
এটি স্পষ্টতই সম্ভব এবং সত্যিকারের সহায়ক উত্তর নয়।
— টিম্ম্ম
102

আপনি আপনার এসভিজিটিকে একটি মুখোশ হিসাবে সেট করতে পারেন। এইভাবে একটি ব্যাকগ্রাউন্ড-রঙ সেট করা আপনার ভরাট রঙ হিসাবে কাজ করবে।

এইচটিএমএল

<div class="logo"></div>

সিএসএস

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

জেএসফিডাল: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

আপনার ব্রাউজারটি এই বৈশিষ্ট্যটি সমর্থন করে কিনা তা দয়া করে পরীক্ষা করুন: https://caniuse.com/#search=mask

— আন্দ্রে কুহলমান n
সূত্র
3
অভ্যন্তরীণ ওয়েবসাইটটি ব্যবহারযোগ্য নয়, তবে for
— হেনরিক ভেন্ডেলবো
9
— র
1
এখানে বর্ণিত পরিস্থিতিগুলির মতো এটি একটি আশ্চর্যজনক সমাধান , যেখানে সিএসএসে ডেটা ইউরিস ব্যতীত অন্য কিছু ব্যবহার করা কিছুটা ব্যথা। ধন্যবাদ!
— গার্ক গার্সিয়া
3
এটা কাজ করছে না. এটি maskএকটি invalid property value। আমি ক্রোমে এটি পরীক্ষা করছি।
— এরেন 555
1
@ ম্যাডম্যাক আমি ক্রোমের একই সংস্করণটি চালাচ্ছি, তবে আমি সেই আচরণটির প্রতিলিপি করতে সক্ষম হইনি। এটি আপনি যে জেএসফিডেলটি চেষ্টা করেছিলেন তা নাকি আপনার কোড?
— আন্দ্রে কুহলমান
78

খাঁটি সিএসএস চেষ্টা করুন:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

এই নিবন্ধে আরও তথ্য https://blog.union.io/code/2017/08/10/img-svg-fill/

— Feri
সূত্র
সাম্প্রতিককালে আমার একটি চেষ্টার সাথে অন্য ব্রাউজারগুলির চেয়ে এজতে আলাদা রঙ পাচ্ছিল।
— জুলিক্স
4
এটি সর্বাধিক ব্রাউজারে কাজ করে তবে আইওএস-সাফারি ব্রাউজারে আমার কিছু সমস্যা ছিল।
— সাইমন লুডভিগ
30

2018: আপনি যদি গতিশীল রঙ চান, জাভাস্ক্রিপ্ট ব্যবহার করতে চান না এবং একটি ইনলাইন এসভিজি চান না, একটি সিএসএস ভেরিয়েবল ব্যবহার করুন। ক্রোম, ফায়ারফক্স এবং সাফারিতে কাজ করে। সম্পাদনা: এবং প্রান্ত

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

আপনার করা SVG সালে কোন দৃষ্টান্ত প্রতিস্থাপন style="fill: #000"সঙ্গে style="fill: var(--color_fill)"।

— উত্তর আমেরিকা
সূত্র
1
এর জন্য ব্রাউজারটি কী সমর্থন করে
— কেভিন গোয়েডেক
@ কেভিনগয়েডেক ক্রোম, ফায়ারফক্স, সাফারি এবং এজ
— আমেরিকান ২
4
মনে হয় অবচিত মধ্যে করা SVG 2
— VSync
5
@ উত্তর আমেরিকান - "প্রমাণ" হিসাবে অন্যান্য স্ট্যাকওভারফ্লো উত্তরের লিঙ্কগুলি অপ্রাসঙ্গিক। এই প্ল্যাটফর্মটিতে যে কেউ কিছু লিখতে পারেন। MDN:"This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"
— vsync
8
মনে হচ্ছে এটি xlink:hrefঅনুকূলে রয়েছে href। সুতরাং এটি এখনও কাজ করতে পারে।
— বেনজামিন ইন্তাল
20

আপনাকে প্রথমে এইচটিএমএল ডিওমে এসভিজি ইনজেক্ট করতে হবে।

এসভিজিআইএনজেক্ট নামে একটি ওপেন সোর্স লাইব্রেরি রয়েছে যা এটি আপনার জন্য করে। এটি ব্যবহার করেonload ইঞ্জেকশনটি ট্রিগার করতে বৈশিষ্ট্যটি ।

এসভিজিআইএনজেক্ট ব্যবহার করে এখানে একটি ন্যূনতম উদাহরণ:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

চিত্রটি লোড হওয়ার পরে ইঞ্জ onload="SVGInject(this)ইনজেকশনটি ট্রিগার করবে এবং <img>উপাদানটি সরবরাহ করা এসভিজি ফাইলের বিষয়বস্তু দ্বারা প্রতিস্থাপিত হবেsrc ।

এটি এসভিজি ইঞ্জেকশন সহ বেশ কয়েকটি সমস্যা সমাধান করে:

  1. ইনজেকশন শেষ না হওয়া পর্যন্ত এসভিজিগুলি আড়াল করা যায়। এটি গুরুত্বপূর্ণ যদি লোড সময়কালে কোনও শৈলী ইতিমধ্যে প্রয়োগ করা হয়, যা অন্যথায় একটি সংক্ষিপ্ত "আনস্টাইলযুক্ত সামগ্রী ফ্ল্যাশ" সৃষ্টি করে।

  2. <img>উপাদান নিজেদের স্বয়ংক্রিয়ভাবে উদ্বুদ্ধ। আপনি যদি গতিশীলভাবে এসভিজিগুলি যুক্ত করেন তবে আপনাকে আবার ইনজেকশন ফাংশনটি কল করার বিষয়ে চিন্তা করতে হবে না।

  3. যদি কোনও এসভিজি একবারে একবারে ইনজেকশন করা হয় তবে ডকুমেন্টে একাধিকবার একই আইডি না এড়াতে এসভিজির প্রতিটি আইডিতে একটি এলোমেলো স্ট্রিং যুক্ত করা হয়।

এসভিজিআইনজেক্টটি সরল জাভাস্ক্রিপ্ট এবং এসভিজি সমর্থন করে এমন সমস্ত ব্রাউজারের সাথে কাজ করে।

দাবি অস্বীকার: আমি এসভিজিআইএনজেক্টের সহ-লেখক

— Waruyama
সূত্র
3
এটি সবচেয়ে সহজ উত্তর। আমি এটি ক্রোম, ফায়ারফক্স এবং এজতে পরীক্ষা করেছি এবং এটি পুরোপুরি কার্যকর হয়।
— সাবস্টিয়ান লোরিয়ন
15

@ প্রভিনের উত্তরটি শক্ত।

আমি আমার কাজের প্রতিক্রিয়া জানাতে পারি না, তাই আমি এটির জন্য একটি jquery হোভার ফাংশন তৈরি করেছি।

সিএসএস

.svg path {
   transition:0.3s all !important;
}

জেএস / জিকুয়েরি

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});
— ম্যাট উজেক
সূত্র
1
এসভিজি শুরু হওয়ার সাথে সাথে ইনলাইন থাকলে এটি কি কাজ করবে না?
— ড্যানিয়েল থম্পসন
হ্যাঁ — তবে আপনি যদি অনেকগুলি এসভিজি ফাইলের সাথে কাজ করছেন বা সেগুলি নিয়মিত আপডেট করে থাকেন তবে এটি পরিচালনা করতে সমস্যা হয়।
— ম্যাট উজেক
15

আপনার এসভিজি ইমেজ বা চিত্রগুলি দিয়ে একটি ওয়েবফন্ট তৈরি করবেন না, সিএসএসে ওয়েবফন্ট আমদানি করুন এবং তারপরে কেবল CSS রঙের বৈশিষ্ট্যটি ব্যবহার করে গ্লিফের রঙ পরিবর্তন করুন? কোনও জাভাস্ক্রিপ্টের দরকার নেই

— পরদেশী
সূত্র
5
যদি আপনার এসভিজিতে বিভিন্ন বর্ণের বেশ কয়েকটি উপাদান থাকে তবে এই দ্রবণটি খুব হ্যাকি হয়ে যায় (বেশ কয়েকটি উপাদান আন্তঃবিযুক্ত)।
— kakaja
1
@ কাকাজা এটি কেবলমাত্র ভেক্টর চিত্রগুলির জন্য একটি সমাধান যাগুলির মধ্যে 1 টি রঙ রয়েছে। আরো বিস্তারিত জানার জন্য bpulecio এর উত্তর দেখার
— বিদেশী
1
কারণ আইকনটি পাঠ্য নয়। হরফ পাঠ্যের জন্য। Svgs আইকন জন্য।
— লাজার লজুবেনভিয়েć
2
@ লাজারলজুবেভিনভি - প্রযুক্তিগতভাবে পাঠ্যটি এমন একটি অক্ষর দ্বারা তৈরি করা হয় যা প্রতীক, এবং আইকনগুলিও প্রতীক, সুতরাং এটি কারণেই অনেকের আইকন-ফন্ট ব্যবহার করতে সমস্যা হয় না। এটি ঠিক "অন্য" পাঠ্য ভাষা তৈরির মতো। ম্যান্ডারিনিয়ান "আইকন" ব্যবহার করে
— অক্ষরও
1
যদিও এটি একটি আকর্ষণীয় সমাধান হিসাবে শোনায়, আমি উত্তরটিকে আরও "কীভাবে" পরিবর্তে "কেন নয়" এর মতো আরও কিছুতে বিস্তৃত করার পরামর্শ দিই
— ইয়াকভল
15

এই উত্তরটি উত্তর https://stackoverflow.com/a/24933495/3890888 এর উপর ভিত্তি করে তবে সেখানে ব্যবহৃত স্ক্রিপ্টের সরল জাভাস্ক্রিপ্ট সংস্করণ সহ।

আপনাকে একটি ইনলাইন এসভিজি হওয়ার জন্য এসভিজি তৈরি করতে হবে । আপনি svgচিত্রটিতে ক্লাস যুক্ত করে এই স্ক্রিপ্টটি ব্যবহার করতে পারেন :

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

এবং তারপরে, এখন আপনি যদি করেন:

.logo-img path {
  fill: #000;
}

অথবা হতে পারে:

.logo-img path {
  background-color: #000;
}

জেএসফিডাল: http://jsfiddle.net/erxu0dzz/1/

— Seb3736
সূত্র
1
দুর্দান্ত .. কাজ করে। এছাড়াও যদি আমাদের পৃষ্ঠায় একাধিক এসভিজে থাকে তবে আমাদের আইআইএফইতে আনতে হবে ব্লক।
— সন্দীপ শর্মা
1
গ্রেট! ES6 এর সাথে ভাল কাজ করে। আপনি যদি আই 9 সম্পর্কে চিন্তা না করেন তবে আপনি এটি ব্যবহার করতে পারেন: parser.parseFromString(text, "image/svg+xml");
— ক্রিস্টোকিভি
আইওএস 9.3.5 এ কোনও ইউআইবিউব ভিউতে কাজ করে না। আমি মনে করি এটি ব্যবহারের কারণে হতে পারে fetchযা 10.1 এ সাফারিতে যুক্ত হয়েছিল (বিকাশক.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / ফেচ_এপিআই )। উপরে jQuery সংস্করণ কাজ করে।
— মারিয়া-ইনেস কেরেরা
7

যে কোনও রঙে রূপান্তর করতে ফিল্টারগুলি ব্যবহার করুন।

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

আপনার যদি এমন একক বর্ণের চিত্র থাকে যা আপনি কেবল রঙ পরিবর্তন করতে চান তবে আপনি কিছু ফিল্টারগুলির সাহায্যে এটি করতে পারেন। এটি অবশ্যই বহু রঙের চিত্রগুলিতে কাজ করে তবে আপনি কোনও নির্দিষ্ট রঙকে লক্ষ্য করতে পারবেন না। শুধুমাত্র পুরো চিত্র।

ফিল্টারগুলি কেবলমাত্র সিএসএস ফিল্টার ব্যবহার করে কোনও বর্ণকে কালো রূপান্তর করতে কীভাবে প্রস্তাবিত স্ক্রিপ্ট থেকে এই ফিল্টারগুলি এসেছিল আপনি যদি কোনও রঙে সাদা পরিবর্তন করতে চান তবে আপনি প্রতিটি ফিল্টারের ইনভার্ট মানটি সামঞ্জস্য করতে পারেন।

.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}
Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>
স্নিপেট প্রসারিত করুন

— JasperZelf
সূত্র
4

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

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

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

একবার, আপনি এই দুটি অপশনের যে কোনও একটি সম্পন্ন করেছেন, তারপরে আপনি সহজেই সিএসএসের মাধ্যমে রঙ পরিবর্তন করতে পারবেন এবং সম্ভবত, আপনি প্রক্রিয়াটিতে আপনার সাইটটিকে আরও বাড়িয়ে দিয়েছেন।

— bpulecio
সূত্র
আপনার এসভিজি স্প্রিটকে একবার চেষ্টা করে দেখা উচিত। আমার অভিজ্ঞতায়, ওয়েব-ফন্টগুলির মধ্যে ব্রাউজার রিলিজের মধ্যে এলোমেলো সমস্যা রয়েছে। এটি ব্যবহার করে দেখুন: fontastic.me - তবে এসভিজি স্প্রাইট সংস্করণ ব্যবহার করুন - এবং আপনি কী ভাবেন তা দেখুন। :)
— শেরিফডেরেক
4

আপনি যদি কেবল চিত্রটি আসল রঙ এবং কালো-সাদা রঙের মধ্যে স্যুইচ করছেন তবে আপনি একজন নির্বাচককে এটি হিসাবে সেট করতে পারেন:

{ফিল্টার: কেউ;}

এবং অন্যটি:

{filter:grayscale(100%);}
— wcb1
সূত্র
3

সরল ..

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

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

প্রথমে এসভিজির পথটি নির্দিষ্ট করুন এবং তারপরে এটির আইডি লিখুন, এই ক্ষেত্রে "ক্যাপো_1"। আপনি যেকোন সম্পাদককে এটি খুলতে এসভিজি আইডি পেতে পারেন।

সিএসএসে: 

.logo {
  fill: red;
}
— হামজা জামাল
সূত্র
kabrice, আপনি এই কোডটি কোডডেন.ইও
— হামজা জামাল
2

আপনার ক্ষেত্রে প্রধান সমস্যাটি হ'ল আপনি কোনও <img>ট্যাগ থেকে এসভিজি আমদানি করছেন যা এসভিজি কাঠামোটি আড়াল করবে।

পছন্দসই প্রভাব পেতে আপনাকে <svg>ট্যাগটির সাথে একযোগে ব্যবহার <use>করতে হবে। এটিকে কার্যকর করতে, আপনি idএসভিজি ফাইলে আপনি যে পথটি ব্যবহার করতে চান তার জন্য আপনাকে ট্যাগ <path id='myName'...>থেকে পুনরুদ্ধার করতে সক্ষম হতে হবে <use xlink:href="#myName"/>। নীচে স্নিপড চেষ্টা করুন।

কোড স্নিপেট দেখান

মনে রাখবেন যে আপনি #যদি কোনও বাহ্যিক উত্স থেকে এসভিজি লোড করতে চান (এবং এটি আপনার এইচটিএমএল এ এম্বেড না করেন) আপনি খণ্ডের আগে কোনও ইউআরএল রাখতে পারেন । এছাড়াও, সাধারণত আপনি সিএসএসের মধ্যে ফিলগুলি নির্দিষ্ট করে না। fill:"currentColor"এসভিজির মধ্যেই এটি ব্যবহার করা ভাল । সংশ্লিষ্ট উপাদানটির সিএসএস রঙের মানটি তখন ব্যবহৃত হবে।

— ফ্লাভিয়েন ভলকেন
সূত্র
2

যেহেতু এসভিজি মূলত কোড তাই আপনার কেবল বিষয়বস্তু প্রয়োজন। আমি কনটেন্ট পেতে পিএইচপি ব্যবহার করেছি, তবে আপনি যা চান তা ব্যবহার করতে পারেন।

<?php
$content    = file_get_contents($pathToSVG);
?>

তারপরে, আমি একটি ডিভ কনটেইনারের ভিতরে সামগ্রী "যেমন আছে" মুদ্রণ করেছি

<div class="fill-class"><?php echo $content;?></div>

সিএসএসে ধারকগুলির এসভিজি শিশুদের ফিনলে সেট করার জন্য To

.fill-class > svg { 
    fill: orange;
}

আমি একটি উপাদান আইকন এসভিজি দিয়ে এই ফলাফল পেয়েছি:

মোজিলা ফায়ারফক্স 59.0.2 (64-বিট) লিনাক্স

এখানে চিত্র বর্ণনা লিখুন

গুগল Chrome66.0.3359.181 (বিল্ড অফ অফিসিয়াল) (64 বিট) লিনাক্স

এখানে চিত্র বর্ণনা লিখুন

অপেরা 53.0.2907.37 লিনাক্স

এখানে চিত্র বর্ণনা লিখুন

— বেঞ্জামিন
সূত্র
আমি ডাউনভোট করতে পারি না তবে দয়া করে কখনও কখনও এটি করবেন না।
— স্যান্ডার
5
কারণ? বিকল্প?
— বেনিয়ামিন
আমার এটি না করার কারণ হ'ল এটি ব্রাউজারকে এসভিজি ক্যাশে রাখতে বাধা দেয়। বিকল্পটি হ'ল এখানে আরও কয়েকটি উত্তরে উল্লিখিত একটি এসভিজি ইনজেক্টর ব্যবহার করা। এসভিজি ফাইলটি এখনও ব্রাউজার দ্বারা ক্যাশে করা হবে এবং ইনজেকশনের এসভিজি এখনও সিএসএসের সাথে স্টাইল করা যেতে পারে। তবে আমি তোমাকে হ্রাস করি না
— সান ট্রেন-এনগুইন
আমি বুঝতে পারি, তবে যাইহোক, ক্যাশের উল্লেখ নেই। সেরা উত্তরের মধ্যে জাভাস্ক্রিপ্ট কোড রয়েছে যা হেডারের মাধ্যমে প্রতিবার পুনরায় লোড করা যায় (বা না) ফাইলের নাম লিংকের পরে একটি হ্যাশকে জোর করে।
— বেনিয়ামিন
2

এটি PHPমিশ্রণে ব্যবহার করা লোকেদের জন্য সহায়ক হতে পারে.svg সিএসএসের সাথে ম্যানিপুলেট করতে চায় এমন চিত্রগুলির ।

আপনি সিএসএস সহ ইমগ ট্যাগের অভ্যন্তরে বৈশিষ্ট্যগুলিকে ওভাররাইট করতে পারবেন না। কিন্তু যখন এসভিজি উত্স কোডটি এইচটিএমএলে এমবেড করা থাকে আপনি অবশ্যই পারেন। আমি এই সমস্যাটি এমন কোনও require_onceফাংশন দিয়ে সমাধান করতে চাই যেখানে আমি একটি .svg.phpফাইল অন্তর্ভুক্ত করি । এটি কোনও চিত্র আমদানির মতো তবে আপনি সিএসএসের সাহায্যে শৈলীগুলি ওভাররাইট করতে পারেন!

প্রথমে এসভিজি ফাইল অন্তর্ভুক্ত করুন:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

এবং এটিতে এই আইকনটি উদাহরণস্বরূপ অন্তর্ভুক্ত রয়েছে: 

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

এখন আমরা সহজেই সিএসএসের মাধ্যমে এর মতো ফিলের রঙটি পরিবর্তন করতে পারি:

svg path {
  fill: blue;
}

আমি প্রথমে এই সমস্যাটি সমাধান করার চেষ্টা করেছি file_get_contents()তবে উপরের সমাধানটি আরও দ্রুত।

— Floris
সূত্র
0

জানুন এটি একটি পুরানো প্রশ্ন তবে সম্প্রতি আমরা একই সমস্যাটি নিয়ে এসেছি এবং আমরা এটি সার্ভার দিক থেকে সমাধান করেছি। এটি একটি পিএইচপি সুনির্দিষ্ট উত্তর তবে আমি ইতিবাচক যে অন্যান্য vর্ষাবিদদেরও তেমন কিছু রয়েছে। ইমগ ট্যাগ ব্যবহার করার পরিবর্তে আপনি এস-জি-জি-কে এস-গ-গ-এ এসভিজি হিসাবে রেন্ডার করুন।

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

এখন আপনি যখন ফাইলটি রেন্ডার করবেন আপনি সম্পূর্ণ ইনলাইন এসভিজি পাবেন

— নেচেম্যা উঙ্গার
সূত্র
0

আপনার কোড সম্পাদকে এসভিজি আইকনটি খুলুন এবং পাথ ট্যাগের পরে একটি শ্রেণি যুক্ত করুন:

<path class'colorToChange' ...

আপনি এসভিজিতে ক্লাস যুক্ত করতে পারেন এবং এর মতো রঙ পরিবর্তন করতে পারেন:

codepen

— হামজা জামাল
সূত্র
-2

যদি আপনার জিকুয়েরিতে অ্যাক্সেস থাকে তবে প্রবীণের উত্তরটি প্রসারিত করে এসভিজির অভ্যন্তরে বিভিন্ন নেস্টেড উপাদানগুলির রঙটি ক্রমগত পরিবর্তন করা যেতে পারে:

$('svg').find('path, text').css('fill', '#ffffff');

সন্ধানের মধ্যেই, আপনি বিভিন্ন উপাদানের উল্লেখ করতে পারেন যা রঙে পরিবর্তন করা দরকার।

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