SVG պատկերների գունազարդումը հեշտացվեց այս երկու այլընտրանքներով:

Երկրորդը միշտ աշխատում է։

Երբևէ ունեցե՞լ եք հաճախորդ, ով ցանկացել է ունենալ իր տորթը և այն նաև ուտել: Դե, ես արեցի: Եվ ոչ թե ցանկացած տորթ, այլ տորթ, որը փոխում է իր համն ու գույնը՝ ըստ նրանց տրամադրության: Ճիշտ է, նրանք ցանկանում էին մի ծրագիր, որը թույլ կտա հարմարեցնել տեքստը և պատկերակները՝ օգտագործելով իրենց նախընտրած գույները: Հեշտ է հնչում, չէ՞: Դե, գունազարդման տեքստը մի կտոր տորթ է: (բառախաղը նախատեսված է) Բայց սրբապատկերների գունավորումը… Կարող է բարդ լինել:

Այս բլոգային գրառման մեջ ես ձեզ ցույց կտամ SVG պատկերները JavaScript-ի միջոցով վերաներկելու երկու այլընտրանք: Առաջինը շատ հավանական էր ու երբեմն չէր աշխատում։ Երկրորդն աշխատում էր անընդհատ, բայց ավելի շատ ծրագրավորման կարիք ուներ:

SVG պատկերները վեկտորային գրաֆիկա են, որոնք կարող են մասշտաբավորվել և մանիպուլյացիայի ենթարկվել՝ առանց որակը կորցնելու: Իմ հաճախորդը ցանկանում էր թույլ տալ օգտվողին փոխել հավելվածի յուրաքանչյուր պատկերակը, օրինակ՝ համապատասխանեցնելով թեմային կամ իր անձին:

Օգտագործելով CSS զտիչներ SVG պատկերի գույները փոխելու համար

Առաջին տարբերակը ավելի հեշտ է, բայց կարող է լիովին համատեղելի չլինել բոլոր բրաուզերների հետ: Այն օգտագործում է արտաքին գրադարան, որը կոչվում է hex-to-css-filter (https://github.com/willmendesneto/hex-to-css-filter), որտեղ վերաներկումն իրականացվում է վեցանկյուն արժեքի վրա գույն դնելով և գրադարանը կհաշվի անհրաժեշտ CSS ֆիլտրերը՝ ցանկալի գույնին համապատասխանելու համար:

Հետևյալ օրինակը գրված է VueJS-ում և փոքր քաղվածք է «տորթերի հավելվածից»: Ուշադրություն դարձրեք, թե ինչպես է fillToFilter մեթոդը ստանում գույն իր տասնվեցական արժեքի վրա, այնուհետև վերադարձնում hexToCSSFilter-ի filter հատկությունը: Այս հատկությունը տող է, որը ներկայացնում է կոնտրաստի, երանգի և այլ արժեքների անհրաժեշտ համակցությունը՝ ենթադրելով, որ SVG պատկերը սև է։

<template>
  <div>
    <img :src="'assets/icon/contact/icon.svg'"
         :style="'filter:' + fillToFilter(getUser.profile.selected_template.style.templateContacts.fill)" />
             
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { mapGetters } from "vuex";
import { hexToCSSFilter } from 'hex-to-css-filter';

export default defineComponent({
  name: "TemplatePage",
  data: () => ({
  }),
  computed: {
    ...mapGetters(["getUser"]),
  },
  methods: {
    fillToFilter(fill) {
      fill = fill.slice(0, 7);
      return hexToCSSFilter(fill).filter;
    }
  }
});
</script>

Նախքան կոդը փորձելը, նկատի ունեցեք, որ ես այն ամփոփել եմ ավելի երկար բաղադրիչից: Նաև հիշեք, որ տեղադրեք անհրաժեշտ գրադարանը:

npm install hex-to-css-filter

Նմուշի արդյունքը կարող է գնահատվել հետևյալ պատկերում: Հեռախոսի պատկերակը իրականում սև պատկեր է, որը մենք ցանկանում ենք գունավորել բաց մոխրագույն (#d3d3d3) SVG պատկերով, և fillToFilter-ի արդյունքը միացնելուց հետո մենք ստանում ենք հետևյալ CSS արժեքը՝ օգտագործելով բրաուզերի ստուգման գործիքը:

Այս տարբերակի առավելությունն այն է, որ այն շատ պարզ է և չի պահանջում որևէ լրացուցիչ JavaScript կոդ: Այնուամենայնիվ, թերությունն այն է, որ այն հիմնված է CSS զտիչների վրա, որոնք չեն աջակցվում բոլոր բրաուզերների կողմից (https://caniuse.com/css-filters): Նաև որոշ զտիչներ կարող են չտալ ցանկալի արդյունք՝ կախված SVG պատկերի սկզբնական գույնից: Ժամանակի 90%-ը ճիշտ է աշխատել, եթե պատկերի ուղիները մաքուր սև են (#000000):

Օգտագործելով JavaScript SVG օբյեկտները վերաներկելու համար

Երկրորդ տարբերակն ավելի լավ է աշխատում և ավելի համատեղելի է բոլոր բրաուզերների հետ: Այն բաղկացած է SVG պատկերը օբյեկտի HTML պիտակի վրա բեռնելուց և այնուհետև օգտագործելով որոշ կոդ՝ ուղիները վերաներկելու համար: Օբյեկտի պիտակը թույլ է տալիս ներդնել արտաքին ռեսուրս ձեր փաստաթղթում և մուտք գործել դրա բովանդակությունը՝ օգտագործելով JavaScript: Օրինակ, SVG պատկերը օբյեկտի պիտակի վրա բեռնելու համար կարող եք օգտագործել.

<object data="assets/icon/contact/icon.svg" class="svg-toolbar-button"></object>

Այնուհետև կարող եք JavaScript-ի միջոցով մուտք գործել SVG փաստաթուղթ օբյեկտի պիտակի ներսում և շահարկել դրա տարրերը: Օրինակ, բոլոր ուղիների գույնը փոխելու համար կարող եք օգտագործել.

changeSVGColor(){
      let svgs:any = document.getElementsByClassName('svg-toolbar-button');

      for (var j = 0; j < svgs.length; j++) {
        let svgDocument = svgs[j].contentDocument;
        let svgElements = svgDocument.getElementsByTagName('path');
        for (var i = 0; i < svgElements.length; i++) {
          svgElements[i].style.fill = this.getUser.profile.selected_template.style.templateContacts.fill;
        }
      }
    }

Այս տարբերակի առավելությունն այն է, որ այն ձեզ ավելի շատ վերահսկողություն է տալիս SVG տարրերի և դրանց հատկանիշների վրա: Գույնը դինամիկ կերպով փոխելու համար կարող եք նաև օգտագործել JavaScript-ի ցանկացած տրամաբանություն կամ գրադարան: Այնուամենայնիվ, թերությունն այն է, որ այն պահանջում է ավելի շատ կոդ և կարող է ունենալ որոշ կատարողական խնդիրներ, եթե SVG պատկերը բարդ է կամ մեծ:

Եզրափակելով, երկու տարբերակներն էլ ունեն իրենց դրական և բացասական կողմերը, և դուք պետք է ընտրեք այն մեկը, որը համապատասխանում է ձեր կարիքներին և նախասիրություններին: Հուսով եմ, որ այս բլոգի գրառումը օգտակար և տեղեկատվական էր: Եթե ​​ունեք հարցեր կամ կարծիքներ, խնդրում ենք թողնել մեկնաբանություն ստորև: