Ақпарат

Әрбір итке нәресте svg қажет


Әрбір итке нәресте svg қажет белгішесі

Біз UI құру процесін жеңілдету үшін svg және webpack + postcss пайдалана бастадық (https://github.com/Nordada/Nordada.Projects/tree/master/client/components/nordada-svg-icons)

Мен белгішенің негізгі түсін өзгертуді шешкенге дейін ол тамаша жұмыс істеді.

Бұл түпнұсқа svg:

Фонды орнатқанда бұл нәтиже: көк (біз көк түсті пайдаланамыз, себебі жобамыздың mn түсі):

Түс өзгерген кезде және түпнұсқа svg енді жұмыс істемейді! Маған қажет нәрсе - түпнұсқа көк түс. Мен іздеуге тырыстым, бірақ мәселеге қатысты ештеңе таппадым. Менің ойымша, бұл фон үшін қандай да бір мөлдірлік немесе көлеңкеге байланысты, бірақ тағы қандай мәселе болуы мүмкін екенін білмеймін.

A:

Svg файлдары жай ғана жол болып табылады, сондықтан CSS көмегімен оның түсін өзгерте алмайсыз, бірақ әрбір белгіше үшін реттелетін түс жасай аласыз.

Сізге белгішелерді бақылау үшін нысан және оны қолдану үшін түс класы қажет болады.

Алдымен біз белгішелерімізді жасаймыз:

const IconArray = {

шеңбер: '<,svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">,<,circle cx="10" " cy="10" r="9" штрих="қара" штрих-ені="1">,<,/circle>,<,/svg>,',

плюс: '<,svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">,<,circle cx="10" " cy="10" r="9" штрих="қара" штрих-ені="1" толтыру="қызыл">,<,/circle>,<,/svg>,',

шаршы: '<,svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">,<,circle cx="10" " cy="10" r="9" штрих="қара" штрих-ені="1" толтыру="қызыл">,<,/circle>,<,/svg>,'

},

const iconPath = document.getElementById("iconPath"),

const белгішесі = document.getElementById("белгіше"),

createIcon() функциясы {

iconPath = document.createElement('i') болсын

iconPath.className = "белгіше",

iconPath.setAttribute("сынып", "icon--плюс"),

let svg = document.createElement('svg'),

svg.className = "svg--белгішесі",

svg.setAttribute("viewBox", "0 0 25 25"),

svg.setAttribute("ені", "25"),

svg.setAttribute("биіктік", "25"),

svg.setAttribute("viewBox", "0 0 25 25"),

шеңберлі болсын = document.createElement('шеңбер'),

circle.setAttribute("cx", "10"),

circle.setAttribute("cy", "10"),

circle.setAttribute("r", "9"),

circle.setAttribute("штрих", "қара"),

circle.setAttribute("штрих-ені", "1"),

circle.setAttribute("толтыру", "қызыл"),

svg.appendChild(шеңбер),

iconPath.appendChild(svg),

icon.appendChild(iconPath),

}

// Мен бұл функцияны әрбір нысаныма қолдануым керек

const стилі = document.querySelectorAll('.box-wrapper')

үшін (let i = 0, i <, style.length, i++) {

addIcon(стиль[i])

}

/*

Бұл мен нысанға қолдануға тырысатын CSS

*/

.box-wrapper {

орны: салыстырмалы,

маржа: авто,

жоғарғы шет: 10px,

төменгі жиегі: 10px,

фон түсі: қызғылт сары,

үстіңгі жағы: 12px,

төменгі толтыру: 12px,

толтыру-солға: 10px,

толтыру-оңға: 10px,

}

.box-wrapper: меңзерді жылжыту {

курсор: көрсеткіш,

}

.box-wrapper .box-title {

шрифт өлшемі: 24px,

түсі: қара,

толтыру үсті: 0px,

төменгі толтыру: 20px,

}

.box-wrapper .box-bottom {

шрифт өлшемі: 13px,

толтыру үсті: 0px,

төменгі толтыру: 20px,

}

.box-wrapper .box-content {

шрифт өлшемі: 15px,

жоғарғы жағы: 30px,

төменгі толтыру: 50px,

}

.box-wrapper .box-content h1 {

шрифт өлшемі: 24px,

жоғарғы жағы: 50px,

түсі: қара,

мәтінді туралау: ортасына,

}

<,script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">,<,/script>,

<,div class="box-wrapper">,

<,div class="box-title">,

<,h2>,Атау<,/h2>,

<,/div>,

<,div class="box-bottom">,

<,h2>,Атау<,/h2>,

<,/div>,

<,div class="box-content">,

<,h1>,Мәтін<,/h1>,

<,/div>,

<,/div>,

A:

Егер сіз Bootstrap пайдалансаңыз. Элементтер арасына бос орын қосу үшін толтыруды пайдаланбауыңыз керек, бірақ оның орнына жолдарыңызға біраз шет қосыңыз. Егер сізде 15 пиксель бос орыны бар 2 баған болса, бағандарыңызға маржа: 0px 0px 15px 15px қосасыз.

<,div class="conner">,

<,div class="қатар">,

<,div class="col-xs-12 col-sm-6">,

<,div class="box-wrapper">,

<,div class="box-title">,

<,h2>,Атау<,/h2>,

<,/div>,

<,div class="box-bottom">,

<,h2>,Атау<,/h2>,


Бейнені қараңыз: Атырауда қараусыз иттер қаптады (Қаңтар 2022).

Video, Sitemap-Video, Sitemap-Videos