সিএসএস (jQuery এসভিজি চিত্র প্রতিস্থাপন) ব্যবহার করে কীভাবে এসভিজি চিত্রের রঙ পরিবর্তন করবেন?

437

এটি কোডের একটি সহজ টুকরোটির স্ব-প্রশ্ন এবং উত্তর।

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

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

এটাই হল প্রশ্ন:

আমি কীভাবে কোনও এসভিজি এম্বেড করব এবং জেএস-এসভিজি ফ্রেমওয়ার্ক ব্যবহার না করে CSS এর রঙ পরিবর্তন করব?

jquery  css  svg 
— ড্রু বেকার
সূত্র
1
দুর্ভাগ্যক্রমে img ট্যাগ IE এ svg ফাইলগুলির সাথে কাজ করে না, তাই এটি মনে রাখবেন। IE এম্বেড ট্যাগগুলি সনাক্ত করে। যাইহোক, সুন্দর কাজ!
2
এসভিজি এর জন্য আপনার "ফিল" সিএসএস সম্পত্তি ব্যবহার করা উচিত। চিত্রগুলির জন্য এটি "ফিল্টার" ব্যবহার করা উপযুক্ত। "ফিল্টার" আসলে উভয়ের জন্যই কাজ করে তবে ভেক্টর গ্রাফিকের জন্য সমস্ত কাজ করা অপ্রয়োজনীয়।
— স্যামি বেঞ্চেরিফ

উত্তর:

536

প্রথমত, কোনও এসভিজি গ্রাফিক এম্বেড করতে আপনার এইচটিএমএলে একটি আইএমজি ট্যাগ ব্যবহার করুন। আমি গ্রাফিকটি তৈরি করতে অ্যাডোব ইলাস্ট্রেটর ব্যবহার করেছি।

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

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

তারপরে এই jQuery কোডটি ব্যবহার করুন (পৃথক ফাইলে বা হেডে ইনলাইন)।

    /**
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

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

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

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

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

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

svg:hover path {
    fill: red;
}

আমি যে jQuery কোডটি লিখেছি সেগুলি মূল চিত্রগুলির আইডি এবং ক্লাস জুড়ে পোর্ট করে। সুতরাং এই সিএসএস এছাড়াও কাজ করে:

#facebook-logo:hover path {
    fill: red;
}

বা:

.social-link:hover path {
    fill: red;
}

আপনি এখানে কাজ করে এর একটি উদাহরণ দেখতে পাবেন: http://labs.funkhausdesign.com/example/img-svg/img-to-svg.html

আমাদের আরও জটিল সংস্করণ রয়েছে যার মধ্যে ক্যাশিং অন্তর্ভুক্ত রয়েছে: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

— ড্রু বেকার
সূত্র
6
এটি কখনও কখনও সাফারিতে কাজ না করে (উদাহরণস্বরূপ), ফিরে আসা ডেটা পাঠযোগ্য কিনা তা নিশ্চিত করতে, });get এর সাথে প্রতিস্থাপন করুন}, 'xml');
— জোয়ান
29
আপনি সম্ভবত নির্বাচকটির সাথে প্রতিস্থাপন করতে পারেন img[src$=".svg"]এবং svgশ্রেণীর প্রয়োজনীয়তা অপসারণ করতে পারেন ।
— কেসি চু
2
@ লিওনগাবান আমার মনে হয় না যে কোনও পটভূমি চিত্র পূরণ করার লক্ষ্য আছে is এটি যদিও আপনি যদি করতে পারেন সুপার সহায়ক!
— ড্রু বেকার
3
কিছুটা দেরী, @ লিওনগাবান, তবে এটি করার একটি আরও ভাল উপায় হ'ল ফিল অ্যাট্রিবিউট পুরোপুরি মুছে ফেলা এবং পিতামহীন এসভিগিতে একটি ফিল যোগ করার জন্য একটি সিএসএস ফাইলে নির্ভর করা। $('#ico_company path').removeAttr('fill')। তারপরে আপনি #ico_company { fill: #ccc }আপনার সিএসএস ফাইলে করতে পারেন
— 16:56
2
@ সোয়াকু, jQuery সমস্ত পাথ ফন্টের বর্ণ হিসাবে `var রঙ = $ img.closest ('পি') এর মতো কিছু করার জন্য সেট করা সহজ হবে c সিএসএস ('রঙ'); $ svg.find ('পাথ')। অ্যাটর ('ফিল', রঙ); `তবে আমি মনে করি এটি CSS এ আরও ভাল কাজ left
— ড্রু বেকার
56

শৈলী

svg path {
    fill: #000;
}

লিপি

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

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

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});
— হেনরিক অ্যালব্রেকটসন
সূত্র
1
আপনার যদি প্রস্থের অ্যাটর না থাকে তবে এটি কেবল একটি ভুল সংখ্যা দিয়ে তৈরি করে। width="170.667"আমার ক্ষেত্রে
— stallingOne
2
এটি পূর্ববর্তী img মাত্রা হারায় বলে এটি নিখুঁত নয়।
— রিচিএইচএইচ
হ্যালো ধরুন আমার প্রতিটি ডিফারনেট রঙের সাথে আলাদা আলাদা এসভিজি রয়েছে। এই পদ্ধতিটি ব্যবহার করে, আমার সমস্ত এসভিজি রঙগুলি লুপ করা হচ্ছে এমন প্রথম এসভিজির মতো হয়ে যায়। কোনও ধারণা আমি কীভাবে এই চারপাশে চালাকি করতে পারি যাতে প্রতিটি রঙ আগের মতো থাকে?
— tnkh
1
মনে রাখবেন যে আপনার এসভিজি যদি অ- pathআকার (যেমন rect) থেকেও তৈরি হয় তবে আপনার সেগুলিও সিএসএসে পরিচালনা করতে হবে
— মুগেন
33

আপনি এখন ব্যবহার করতে পারেন সিএসএস filterসম্পত্তি মধ্যে এটি অত্যাধুনিক ব্রাউজারে (এজ সহ, কিন্তু না IE11)। এটি এসভিজি চিত্রের পাশাপাশি অন্যান্য উপাদানগুলিতেও কাজ করে। আপনি রঙগুলি ব্যবহার করতে hue-rotateবা invertসংশোধন করতে পারেন , যদিও এগুলি আপনাকে আলাদা আলাদা রং আলাদাভাবে পরিবর্তন করতে দেয় না। আমি একটি আইকনটির "অক্ষম" সংস্করণ দেখানোর জন্য নীচের সিএসএস শ্রেণিটি ব্যবহার করি (যেখানে মূলটি স্যাচুরেটেড রঙের একটি এসভিজি চিত্র):

.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

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

ট্যমজিজি বেল আইকনটির জন্য চারটি পৃথক সিএসএস ক্লাসের একটি উদাহরণ এখানে রয়েছে : মূল (হলুদ), উপরের "অক্ষম" শ্রেণি, hue-rotate(সবুজ) এবং invert(নীল)।

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

— aldel
সূত্র
সবেমাত্র লক্ষ্য করা গেছে যে আপনি আইকন ফন্ট তৈরি করতে না চাইলে উল্টা করা ভাল সমাধান। আমি CSS ওয়েবসাইটের বর্ণ অনুযায়ী আমার ওয়েবসাইটের শিরোনামে আইকন পরিবর্তন করতে এই jQuery কোডটি ব্যবহার করেছি (লক্ষ্য করুন যে আমি সাদা if ($('.w3-top img').css("color") == "rgb(0, 0, 0)") { $('.w3-top img').css("filter", "invert(100%)"); $('.w3-top img').css("-webkit-filter", "invert(100%)"); };
— পিএনজি
দুর্দান্ত পন্থা। লক্ষ্য আইকনের রঙ যুক্ত করতে আমার এসভিজি এক্সএমএল সম্পাদনা করেছেন তারপরে ধূসর করতে একটি আইকন-অক্ষম শ্রেণীর ব্যবহার করেছেন।
— সুশিগু
লক্ষ্য করুন যে পুরানো
— এক্সপ্লোরারগুলি
25

বিকল্পভাবে আপনি সিএসএস ব্যবহার করতে পারেন mask, মঞ্জুর করা ব্রাউজার সমর্থনটি ভাল নয় তবে আপনি একটি ফলব্যাক ব্যবহার করতে পারেন

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}
— seanjacob
সূত্র
14
MDN নির্দিষ্ট করে যে -webkit-maskকোনও উত্পাদন ওয়েবসাইটে ব্যবহার করা উচিত নয়।
— ভাইন্ডিল
1
এসভিজি
— ভিশাল
সম্ভবত এটি বলা প্রাসঙ্গিক যে এখন, চার বছর পরে, এই সমাধানটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করছে। এখানে কেবল পরীক্ষা করা হয়েছে এবং এটি 100% ঠিক আছে।
— ড্যানিয়েল লেমেস
23

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

সুবিধাটি হ'ল আপনি নিজের এসভিজির কিছু অংশ সিএসএসের মাধ্যমে হোভারের জন্য লক্ষ্যবস্তু করতে পারেন - জাভাস্ক্রিপ্টের প্রয়োজন নেই।

http://codepen.io/chriscoyier/pen/evcBu

আপনাকে কেবল এই জাতীয় সিএসএস বিধি ব্যবহার করতে হবে:

#pathidorclass:hover { fill: #303 !important; }

নোট করুন যে !importantবিটটি পূরণের রঙকে ওভাররাইড করার জন্য প্রয়োজনীয়।

— trebor1979
সূত্র
3
অ্যাঙ্গুলারজেএস ব্যবহারকারীদের জন্য:<div ng-include="'svg.svg'"></div>
— মাইকেল
যদিও একটি ডাটাবেসে এসভিজি ডেটা সংরক্ষণ করার জন্য খুব মার্জিত সমাধান নয়। ভুল নয়, তবে টেমপ্লেট বা অন্যান্য সম্পদ ব্যবহারের পরিবর্তে কোনও এপিআই বা সিএমএস থেকে এক্সএমএল / এইচটিএমএল / এসভিজি ডোম ডেটা পাম্প করা ঠিক ভুল অনুভব করে।
— ক্রিস্টোকিউই
এই অবদানের জন্য আপনাকে ধন্যবাদ ... সর্বাধিক উন্নত সাইটগুলি আজ সব ধরণের ক্রিয়াকলাপের জন্য অনুমতি দেয় এসভিজি ডেটা, এই উত্তর ছাড়া আমি অনুমান করতাম না!
— ওয়েবম্যান
অতিরিক্তভাবে, যদি আপনার এসভিজির স্বচ্ছ অঞ্চল থাকে তবে এগুলি ঘুরে বেড়ানো হিসাবে গণ্য হবে না এবং আপনি "চটকদার হোভার" এর অভিজ্ঞতা পেতে পারেন। এটি ঠিক করতে, কেবল একটি মোড়কের উপাদান যুক্ত করুন (একটি <a>, যদি এটি সুবিধাজনক হয়) এবং তারপরে এটি সিএসএস নিয়মে যুক্ত করুন। #pathidorclass:hover, .wrapperclass:hover #pathidorclass { fill: green; }অথবা এমনকি এসভিজি পাথের মূল হোভারটিও সরিয়ে ফেলুন যেহেতু আপনি এখন যেকোনোভাবে মোড়কের উপাদানটির মাধ্যমে এটি টার্গেট করছেন।
— নিল মনরো
18

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

একই কোডের AngularJs উপায়

1. এইচটিএমএল : আপনার এইচটিএমএল ফাইলটিতে বেলো ট্যাগ ব্যবহার করুন:

<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>

২. নির্দেশিকা : এটি সেই নির্দেশিকা যা আপনাকে ট্যাগটি সনাক্ত করতে হবে:

'use strict';
angular.module('myApp')
  .directive('svgImage', ['$http', function($http) {
    return {
      restrict: 'E',
      link: function(scope, element) {
        var imgURL = element.attr('src');
        // if you want to use ng-include, then
        // instead of the above line write the bellow:
        // var imgURL = element.attr('ng-include');
        var request = $http.get(
          imgURL,
          {'Content-Type': 'application/xml'}
        );

        scope.manipulateImgNode = function(data, elem){
          var $svg = angular.element(data)[4];
          var imgClass = elem.attr('class');
          if(typeof(imgClass) !== 'undefined') {
            var classes = imgClass.split(' ');
            for(var i = 0; i < classes.length; ++i){
              $svg.classList.add(classes[i]);
            }
          }
          $svg.removeAttribute('xmlns:a');
          return $svg;
        };

        request.success(function(data){
          element.replaceWith(scope.manipulateImgNode(data, element));
        });
      }
    };
  }]);

৩. সিএসএস :

.any-class-you-wish{
    border: 1px solid red;
    height: 300px;
    width:  120px
}

৪.কর্ম-জুঁই সহ ইউনিট-পরীক্ষা :

'use strict';

describe('Directive: svgImage', function() {

  var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data;

  beforeEach(function() {
    module('myApp');

    inject(function($injector) {
      $rootScope = $injector.get('$rootScope');
      $compile = $injector.get('$compile');
      $httpBackend = $injector.get('$httpBackend');
      apiUrl = $injector.get('apiUrl');
    });

    scope = $rootScope.$new();
    element = angular.element('<svg-image src="/icons/icon-man.svg" class="svg"></svg-image>');
    element = $compile(element)(scope);

    spyOn(scope, 'manipulateImgNode').andCallThrough();
    $httpBackend.whenGET(apiUrl + 'me').respond(200, {});

    data = '<?xml version="1.0" encoding="utf-8"?>' +
      '<!-- Generator: Adobe Illustrator 17.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">' +
      '<!-- Obj -->' +
      '<!-- Obj -->' +
      '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
      'width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">' +
        '<g>' +
          '<path fill="#F4A902" d=""/>' +
          '<path fill="#F4A902" d=""/>' +
        '</g>' +
      '</svg>';
    $httpBackend.expectGET('/icons/icon-man.svg').respond(200, data);
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should call manipulateImgNode atleast once', function () {
    $httpBackend.flush();
    expect(scope.manipulateImgNode.callCount).toBe(1);
  });

  it('should return correct result', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    expect(result).toBeDefined();
  });

  it('should define classes', function () {
    $httpBackend.flush();
    var result = scope.manipulateImgNode(data, element);
    var classList = ["svg"];
    expect(result.classList[0]).toBe(classList[0]);
  });
});
— ম্যাক্স
সূত্র
1
আপনার সমাধান কাজ করে না, হতে পারে<div ng-include="/icons/my.svg" class="any-class-you-wish"></div>
— গিলাইম ভিনসেন্ট
@guillaumevincent আপনার সাথে ব্যবহার করতে চান ng-includeতাহলে, শুধুমাত্র এই লাইন পরিবর্তন var imgURL = element.attr('src');করতেvar imgURL = element.attr('ng-include');
— ম্যাক্স
এটি একটি খুব সহজ সমাধান, তবে এটি অত্যধিক ব্যবহারের ক্ষেত্রে সাবধানতা অবলম্বন করুন কারণ এটি কার্যকরীভাবে পারফরম্যান্সকে আঘাত করতে পারে - IE 5 টি শেয়ারিং আইকনের একটি সেট নিবন্ধের তালিকা বা এর মতো কিছুতে পুনরাবৃত্তি হয়েছে।
— skxc
1
আইই তে আপনার কোড নিয়ে সমস্যা আছে। আপনি if (typeof(imgClass) !== 'undefined') { $svg.setAttribute("class", imgClass); }বিভক্তির পরিবর্তে এবং লুপের পরিবর্তে ব্যবহার করতে পারেন ।
— রবার্ট বকোরি
2
অসাধারণ কাজ! তবে নির্দিষ্ট ইমেজের জন্য আপনাকে এসভিজি ( angular.element(data)[0];) এর প্রথম উপাদানটি ধরতে হবে এবং এটি ব্যবহার করে কার্যকর করতে হবে if ($svg.getAttribute('class')) { $svg.setAttribute('class', $svg.getAttribute('class') + ' ' + imgClass); } else { $svg.setAttribute('class', imgClass); }। এছাড়াও আপনি cache: trueঅপশনগুলির সাথে যুক্ত করতে চাইতে পারেন $http.getঅন্যথায় আপনার পৃষ্ঠাটি খুব ধীর হয়ে যেতে পারে।
— লিও
16

আমি বুঝতে পেরেছি যে আপনি সিএসএস দিয়ে এটি সম্পাদন করতে চাইছেন তবে এটি একটি ছোট, সাধারণ চিত্রের ক্ষেত্রে কেবলমাত্র একটি অনুস্মারক - আপনি সর্বদা এটি নোটপ্যাড ++ এ খোলাতে এবং পথ / whetverelement এর ফিল পূরণ করতে পারেন:

<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
    ...
    C412.843,226.163,402.511,211.451,394.854,205.444z"/>

এটি এক টন কুরুচিপূর্ণ স্ক্রিপ্ট সংরক্ষণ করতে পারে। যদি এটি অফ-বেস হয় তবে দুঃখিত, তবে কখনও কখনও সহজ সমাধানগুলি উপেক্ষা করা যায়।

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

— DShultz
সূত্র
7

আমি AngularJS দিয়ে এই সমস্যাটি সমাধান করার জন্য একটি নির্দেশিকা লিখেছি। এটি এখানে উপলভ্য - ngReusableSvg ।

এটি এসভিজি উপাদানটি রেন্ডার হওয়ার পরে প্রতিস্থাপন করে এবং এটি একটি divউপাদান এর ভিতরে রাখে , এটির সিএসএস সহজে পরিবর্তনযোগ্য। এটি বিভিন্ন আকারে / রঙ ব্যবহার করে বিভিন্ন স্থানে একই এসভিজি ফাইল ব্যবহার করতে সহায়তা করে।

ব্যবহার সহজ:

<object oa-reusable-svg
        data="my_icon.svg"
        type="image/svg+xml"
        class="svg-class"
        height="30"  // given to prevent UI glitches at switch time
        width="30">
</object>

এর পরে, আপনি সহজেই থাকতে পারেন:

.svg-class svg {
    fill: red; // whichever color you want
}
— ওমরি আহারন
সূত্র
হাই, এই সমাধান সরবরাহ করার জন্য ধন্যবাদ। আমি চেষ্টা করে দেখেছি এবং ফল পেয়েছে: <div ng-click = "ইভেন্টহ্যান্ডলার ()" এনজি-ক্লাস = "ক্লাসএভেন্টহ্যান্ডলার ()" শৈলী = "উচ্চতা: 30px; প্রস্থ: 30px; ভাসা: বাম;" শ্রেণি = "এসভিজি-শ্রেণি" আইডি = "আমার-এসভিজি" উচ্চতা = "30" প্রস্থ = "30"> [[অবজেক্ট এসভিজিএসভিজিলেট]] </ ডিভি> এটি কেবলমাত্র [[অবজেক্ট এসভিজিএসভিজিলেট]] রাখে। জানেন কি সমস্যা? আরেকটি প্রশ্ন, এটির কার্যকারিতাতে কি বড় প্রভাব রয়েছে বা আমি এটি কোনও পৃষ্ঠায় অনেকগুলি এসভিজি ব্যবহার করতে পারি? এবং সর্বশেষে, এটি এখনও কৌনিক 1.3 (বোরার) এ রয়েছে।
— বর্ষাচ্ছে
কৌনিকটির কোন সংস্করণ আপনি ব্যবহার করছেন? আপনার সমস্যার মুখোমুখি হয় নি .. হতে পারে এটি এসভিজির সাথে কিছু? পারফরম্যান্স অনুযায়ী সুইচটি তুলনামূলকভাবে ভারী, আমি এটি নিজের মতো করে 10 এর মতো ব্যবহার করেছি এবং এটি দুর্দান্ত ছিল .. আমার ধারণা এটি পরিমাণ / আকারের উপর নির্ভর করে তাই এটি পরীক্ষা করে পরীক্ষা করুন। বোরারের সমস্যা কী? আপনি কি আলাদা সংস্করণ ব্যবহার করছেন এবং কোনও বিরোধ আছে?
— ওমরি আহারন
5

টিএল / ডিআর: এখানে যান-> https://codepen.io/sosuke/pen/Pjoqqp

ব্যাখ্যা:

আমি ধরে নিচ্ছি আপনার এইচটিএমএল কিছু রয়েছে:

<img src="/img/source.svg" class="myClass">

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

filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);

তার চেয়েও ভাল এটি হ'ল আপনি যে হেক্সটিকে নিজের জন্য একটি ফিল্টারে রূপান্তর করতে কেবল একটি সরঞ্জাম ব্যবহার করতে পারেন: https://codepen.io/sosuke/pen/Pjoqqp

— AhrenFullStop
সূত্র
এটি কেবলমাত্র দুর্দান্ত CSS এর সমাধান, হেক্স থেকে ফিল্টার পর্যন্ত কোডেপেন কেবল দুর্দান্ত।
— রিচি গঞ্জালেজ
4

knockout.jsগৃহীত উত্তরের উপর ভিত্তি করে এখানে একটি সংস্করণ দেওয়া হয়েছে :

গুরুত্বপূর্ণ: এটি প্রতিস্থাপনের জন্য আসলে jQuery খুব প্রয়োজন, তবে আমি ভেবেছিলাম এটি কারওর পক্ষে কার্যকর হতে পারে।

ko.bindingHandlers.svgConvert =
    {
        'init': function ()
        {
            return { 'controlsDescendantBindings': true };
        },

        'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
        {
            var $img = $(element);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

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

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

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

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        }
    };

তারপরে কেবল data-bind="svgConvert: true"আপনার আইএমজি ট্যাগে প্রয়োগ করুন ।

এই সমাধানটি সম্পূর্ণভাবে imgএকটি এসভিজির সাথে ট্যাগটি প্রতিস্থাপন করে এবং কোনও অতিরিক্ত বাইন্ডিং সম্মানিত হবে না।

— Simon_Weaver
সূত্র
2
এটা অসাধারণ! আপনি যদি এটি পরবর্তী স্তরে নিয়ে যেতে চান তবে আমাদের কাছে একটি আপডেট সংস্করণ রয়েছে যার মধ্যে ক্যাচিং রয়েছে, সুতরাং একই এসভিজিকে দু'বার অনুরোধ করা হয়নি। github.com/funkhaus/style-guide/blob/master/template/js/…
— ড্রু বেকার
আমি এটি সম্পর্কে কিছুটা চিন্তিত ছিলাম তবে এটিকে নিজে খতিয়ে দেখার সময় পাইনি।
— সবেমাত্র
1
@ ড্রুবেকার আসলে আমি আরও উদ্বিগ্ন ছিলাম যে img ট্যাগটি ফাইলটির জন্য অনুরোধ করবে এবং তারপরে getপুনরায় অনুরোধ করবে। আমি ট্যাগটির srcএকটি data-srcবৈশিষ্ট্যে পরিবর্তনটি বিবেচনা করেছি img, তবে এই সিদ্ধান্তে
— পৌঁছেছি
3

এখানে কোনও ফ্রেমওয়ার্ক কোড নেই, কেবল খাঁটি জেএস:

document.querySelectorAll('img.svg').forEach(function(element) {
            var imgID = element.getAttribute('id')
            var imgClass = element.getAttribute('class')
            var imgURL = element.getAttribute('src')

            xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var svg = xhr.responseXML.getElementsByTagName('svg')[0];

                    if(imgID != null) {
                         svg.setAttribute('id', imgID);
                    }

                    if(imgClass != null) {
                         svg.setAttribute('class', imgClass + ' replaced-svg');
                    }

                    svg.removeAttribute('xmlns:a')

                    if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
                        svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
                    }
                    element.parentElement.replaceChild(svg, element)
                }
            }
            xhr.open('GET', imgURL, true)
            xhr.send(null)
        })
— user3144480
সূত্র
3

এসভিজিআইএনজেক্ট নামে একটি ওপেন সোর্স লাইব্রেরি রয়েছে যা onloadইঞ্জেকশনটি ট্রিগার করতে অ্যাট্রিবিউটটি ব্যবহার করে । আপনি গিটহাব প্রকল্পটি https://github.com/iconfu/svg-inject এ খুঁজে পেতে পারেন

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

<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>উপাদান স্বয়ংক্রিয়ভাবে themselved উদ্বুদ্ধ। আপনি যদি গতিশীলভাবে এসভিজিগুলি যুক্ত করেন তবে আপনাকে আবার ইনজেকশন ফাংশনটি কল করার বিষয়ে চিন্তা করতে হবে না।

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

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

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

— Waruyama
সূত্র
1
আমি এই সমাধানটি সবচেয়ে পছন্দ করি কারণ এটি গতিশীল যুক্ত এসভিজিগুলির যত্ন নেয়।
— ভিকিবি
2

আমাদের যদি এই জাতীয় এসভিজি চিত্রের সংখ্যার বেশি থাকে তবে আমরা ফন্ট-ফাইলগুলির সহায়তাও নিতে পারি। Https://glyphter.com/ এর
মতো সাইটগুলি আমাদের এসএমএস থেকে ফন্ট ফাইল পেতে পারে।

যেমন

@font-face {
    font-family: 'iconFont';
    src: url('iconFont.eot');
}
#target{
    color: white;
    font-size:96px;
    font-family:iconFont;
}
— অভিষেক বোরার
সূত্র
5
আমি ব্যক্তিগতভাবে "ফন্ট হিসাবে চিত্রগুলি" ঘৃণা করি। ইমেজগুলি যুক্ত / সম্পাদনা করা শক্ত করে তোলে, প্রচুর অযৌক্তিক মার্কআপ যুক্ত করে। ফন্ট এর ফন্ট হওয়া উচিত, চিত্র চিত্র ইত্যাদি হওয়া উচিত
— ড্রিউ বেকার
একমত। আপনি অক্ষরগুলিতে নির্ধারিত চিত্রগুলি মনে রাখতে / দেখার প্রয়োজন। তবে নির্দিষ্ট ক্ষেত্রে যেখানে চিত্রগুলি আইকন / বোতাম / বুলেট হিসাবে ব্যবহৃত হয়, মিডিয়া থেকে পাঠ্য হিসাবে আরও বেশি কাজ করে, ফন্ট-ফাইলগুলিও বিকল্প হতে পারে
— অভিষেক বোরার
এমনকি গিথুব
— ggarine
2

আপনি এটির জন্য ডেটা-চিত্র ব্যবহার করতে পারেন। ডেটা-ইমেজ (ডেটা-ইউআরআই) ব্যবহার করে আপনি ইনলাইনের মতো এসভিজি অ্যাক্সেস করতে পারেন।

খাঁটি সিএসএস এবং এসভিজি ব্যবহার করে রোলওভার এফেক্টটি এখানে রয়েছে।

আমি জানি এটা অগোছালো তবে আপনি এইভাবে করতে পারেন।

 .action-btn {
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
    height: 40px;
    width: 60px;
    display: inline-block;
 }

.delete {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#FB404B' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
     border-color:#FB404B;
     
 }
 
 .delete:hover {
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#fff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");        
     background-color: #FB404B;
    }
<a class="action-btn delete">&nbsp;</a>
স্নিপেট প্রসারিত করুন

আপনি এখানে আপনার এসভিজি ডেটা ইউআরএলে রূপান্তর করতে পারেন

  1. https://codepen.io/elliz/full/ygvgay
  2. https://websemantics.uk/tools/svg-to-background-image-conversion/
— patelarpan
সূত্র
এটি জটিল এসভিজির পক্ষে কাজ করবে না যেখানে আপনি কেবল কয়েকটি নির্দিষ্ট পথ / বহুভুজ / ইত্যাদি চান ..
— ড্রু বেকার
না আপনি পারবেন না..কিন্তু এটি খুব জটিল
— পাটেলপান
এটি আইকনের জন্য কেবল সমাধানগুলি
— পেটালারপান
আইকন দিয়ে যদি কিছু কাজ করে। তাহলে এটা দুর্দান্ত। বুটস্ট্র্যাপ 4 এছাড়াও এই
— টেকনিকটি
2

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

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

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

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

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

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

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

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

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

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

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

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

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

— বেঞ্জামিন
সূত্র
1

আপনি যদি ডকুমার সমস্ত এসভিজি উপাদানগুলি প্রক্রিয়া করতে jQuery চান এবং আপনার ডোমটি যুক্তিযুক্ত আকারের হয় তবে নির্বাচিত সমাধানটি ঠিক আছে। তবে যদি আপনার ডোমটি বৃহত হয় এবং আপনি আপনার ডমটির কিছু অংশ গতিশীলভাবে লোড করার সিদ্ধান্ত নেন, কেবল এসভিজি উপাদানগুলি আপডেট করার জন্য পুরো ডোমটিকে পুনরায় ত্যাগ করতে হবে তা আসলেই বোধগম্য নয়। পরিবর্তে, এটি করার জন্য একটি jQuery প্লাগইন ব্যবহার করুন:

/**
 * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
 *
 * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
 *
 * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
 * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
 * any styles in a style class instead.
 */
(function ($) {
    $.fn.svgLoader = function () {
        var src = $(this).attr("src");
        var width = this.attr("width");
        var height = this.attr("height");
        var cls = this.attr("class");
        var ctx = $(this);

        // Get the svg file and replace the <svg> element.
        $.ajax({
            url: src,
            cache: false
        }).done(function (html) {
            let svg = $(html);
            svg.attr("width", width);
            svg.attr("height", height);
            svg.attr("class", cls);
            var newHtml = $('<a></a>').append(svg.clone()).html();
            ctx.replaceWith(newHtml);
        });

        return this;
    };

}(jQuery));

আপনার এইচটিএমএলে, একটি এসভিজি উপাদান নীচে উল্লেখ করুন:

<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>

এবং প্লাগইন প্রয়োগ করুন:

$(".mySVGClass").svgLoader();
— AndroidDev
সূত্র
হ্যাঁ, আমি যে কোডটি দিয়েছি তা ব্যবহারের আরও কার্যকর উপায় রয়েছে। উত্পাদনের সাইটে আমরা এটি কীভাবে ব্যবহার করি তা এখানে। এটি এসভিজিকে ক্যাশে করে! github.com/funkhaus/style-guide/blob/master/template/js/…
— ড্রু বেকার
1

এর জন্য: ইভেন্ট এনিমেশনগুলি হোভার করুন আমরা স্টাইলগুলি এসভিজি ফাইলের মধ্যে রেখে যেতে পারি, যেমন একটি

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <style>
  rect {
    fill:rgb(165,225,75);
    stroke:none;
    transition: 550ms ease-in-out;
    transform-origin:125px 125px;
  }
  rect:hover {
    fill:rgb(75,165,225);
    transform:rotate(360deg);
  }
  </style>
</defs>
  <rect x='50' y='50' width='150' height='150'/>
</svg>

এটি svgshare এ পরীক্ষা করুন

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