1

Так это выглядит в браузере

Все заданные стили в котором находиться изображение. Эти стили написаны в .scss

    .section-wrap {
    position: relative;

    .section-wrap__icon {

        a {
            width: 64px;
            height: 64px;
            border: 5px solid rgba(255, 255, 255, 0.25);
            position: absolute;left: 50%;
            left: 50%;
            bottom: 8%;
            transform: translate(-50%, 15px);
            z-index: 2;
            border-radius: 50%;
            background-color: $white;
        }

        .section-wrap__img {
            width: 30px;
            height: 30px;
            fill: $red; // #e74c3c;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    }

}

Подключенное изображение через HTML

<div class="section-wrap__icon">
  <a href="#">
  <img class="section-wrap__img img" src="img/icons/icon1.svg">
  </a>
  </div>

SVG-файл

    <!-- Generator: Adobe Illustrator 18.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="icon1.svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 474.986 474.986" style="enable-background:new 0 0 474.986 474.986;" xml:space="preserve">
<path id="XMLID_3_" d="M440.904,356.937l-15.139-80.104c-0.632-3.32-2.842-6.123-5.93-7.501c-3.081-1.386-6.647-1.163-9.542,0.577
    l-69.815,42.086c-4.09,2.464-5.954,7.408-4.514,11.952c1.434,4.552,5.799,7.515,10.559,7.184l27.269-1.902
    c-26.037,34.993-65.227,49.355-110.178,53.036V153.103h22.449c3.62,2.695,8.07,4.343,12.929,4.343
    c12.021,0,21.771-9.742,21.771-21.764c0-12.029-9.75-21.771-21.771-21.771c-4.867,0-9.318,1.656-12.938,4.351h-22.441V86.789
    c12.776-8.494,21.231-22.987,21.231-39.436C284.845,21.247,263.6,0,237.493,0c-26.107,0-47.354,21.247-47.354,47.353
    c0,16.449,8.456,30.942,21.231,39.436v31.474h-22.44c-3.62-2.695-8.07-4.351-12.937-4.351c-12.021,0-21.771,9.742-21.771,21.771
    c0,12.021,9.75,21.764,21.771,21.764c4.859,0,9.309-1.648,12.929-4.343h22.448v229.162c-44.95-3.681-84.14-18.043-110.176-53.036
    l27.269,1.902c4.759,0.331,9.125-2.632,10.558-7.184c1.44-4.543-0.423-9.488-4.513-11.952l-69.816-42.086
    c-2.896-1.74-6.461-1.963-9.542-0.577c-3.088,1.378-5.298,4.181-5.93,7.501l-15.14,80.104c-0.886,4.689,1.555,9.372,5.906,11.327
    c4.351,1.965,9.472,0.686,12.399-3.088l16.287-21.008c31.843,51.565,81.914,94.736,139.664,105.942l21.854,21.854
    c4.036,4.028,10.565,4.028,14.594,0l21.854-21.854c57.75-11.198,107.828-54.377,139.672-105.942l16.287,21.008
    c2.927,3.774,8.048,5.053,12.398,3.088C439.349,366.309,441.79,361.626,440.904,356.937z M237.493,34.839
    c6.9,0,12.513,5.614,12.513,12.514c0,6.9-5.613,12.514-12.513,12.514c-6.9,0-12.515-5.614-12.515-12.514
    C224.979,40.453,230.593,34.839,237.493,34.839z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Цветовые переменные, которые я использовал. Файл _variables.scss

$white: #fff;
$black: #000;

$white-gray: #f4f5f9;
$gray-light: #cbc6c0;

$red: #e74c3c;
8
  • Может как то через JS? 4 июн 2019 в 12:15
  • если верстку поменять нельзя, то только через js ну или в svg поменять 4 июн 2019 в 12:20
  • Каким образом? Можно пример пожалуйста. 4 июн 2019 в 12:21
  • так верстку поменять нельзя или можно? 4 июн 2019 в 12:21
  • А чем вас fill не устраивает?
    – nomnoms12
    4 июн 2019 в 12:22

1 ответ 1

0

Если можно поменять цвет в самой иконке - то вот

 <path id="XMLID_3_" fill="red"

<!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="icon1.svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 474.986 474.986" style="enable-background:new 0 0 474.986 474.986;" xml:space="preserve">
<path id="XMLID_3_" fill="red" d="M440.904,356.937l-15.139-80.104c-0.632-3.32-2.842-6.123-5.93-7.501c-3.081-1.386-6.647-1.163-9.542,0.577
    l-69.815,42.086c-4.09,2.464-5.954,7.408-4.514,11.952c1.434,4.552,5.799,7.515,10.559,7.184l27.269-1.902
    c-26.037,34.993-65.227,49.355-110.178,53.036V153.103h22.449c3.62,2.695,8.07,4.343,12.929,4.343
    c12.021,0,21.771-9.742,21.771-21.764c0-12.029-9.75-21.771-21.771-21.771c-4.867,0-9.318,1.656-12.938,4.351h-22.441V86.789
    c12.776-8.494,21.231-22.987,21.231-39.436C284.845,21.247,263.6,0,237.493,0c-26.107,0-47.354,21.247-47.354,47.353
    c0,16.449,8.456,30.942,21.231,39.436v31.474h-22.44c-3.62-2.695-8.07-4.351-12.937-4.351c-12.021,0-21.771,9.742-21.771,21.771
    c0,12.021,9.75,21.764,21.771,21.764c4.859,0,9.309-1.648,12.929-4.343h22.448v229.162c-44.95-3.681-84.14-18.043-110.176-53.036
    l27.269,1.902c4.759,0.331,9.125-2.632,10.558-7.184c1.44-4.543-0.423-9.488-4.513-11.952l-69.816-42.086
    c-2.896-1.74-6.461-1.963-9.542-0.577c-3.088,1.378-5.298,4.181-5.93,7.501l-15.14,80.104c-0.886,4.689,1.555,9.372,5.906,11.327
    c4.351,1.965,9.472,0.686,12.399-3.088l16.287-21.008c31.843,51.565,81.914,94.736,139.664,105.942l21.854,21.854
    c4.036,4.028,10.565,4.028,14.594,0l21.854-21.854c57.75-11.198,107.828-54.377,139.672-105.942l16.287,21.008
    c2.927,3.774,8.048,5.053,12.398,3.088C439.349,366.309,441.79,361.626,440.904,356.937z M237.493,34.839
    c6.9,0,12.513,5.614,12.513,12.514c0,6.9-5.613,12.514-12.513,12.514c-6.9,0-12.515-5.614-12.515-12.514
    C224.979,40.453,230.593,34.839,237.493,34.839z"/>
   
</svg>

PS: Если же верстку поменять нельзя, а иконки из основного документа хочется раскрасить по-разному уже необходимо по колдовать:

addToDom('.section-wrap__img')

function addToDom(selector) {
  [...document.querySelectorAll(selector)].forEach(el => {
    fetch(el.src).then(r => r.text()).then(r => {
      let p = el.parentNode;
      el.remove();
      p.innerHTML += r;
    })
  })
}
.section-wrap__icon2 path {
  fill:red;
}

.section-wrap__icon1 path {
  fill:blue;
}

svg{
  width:50px
}
<div class="section-wrap__icon2">
  <a href="#">
    <img class="section-wrap__img img" src="data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='icon1.svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 474.986 474.986' style='enable-background:new 0 0 474.986 474.986;' xml:space='preserve'%3E%3Cpath id='XMLID_3_' fill='red' d='M440.904,356.937l-15.139-80.104c-0.632-3.32-2.842-6.123-5.93-7.501c-3.081-1.386-6.647-1.163-9.542,0.577 l-69.815,42.086c-4.09,2.464-5.954,7.408-4.514,11.952c1.434,4.552,5.799,7.515,10.559,7.184l27.269-1.902 c-26.037,34.993-65.227,49.355-110.178,53.036V153.103h22.449c3.62,2.695,8.07,4.343,12.929,4.343 c12.021,0,21.771-9.742,21.771-21.764c0-12.029-9.75-21.771-21.771-21.771c-4.867,0-9.318,1.656-12.938,4.351h-22.441V86.789 c12.776-8.494,21.231-22.987,21.231-39.436C284.845,21.247,263.6,0,237.493,0c-26.107,0-47.354,21.247-47.354,47.353 c0,16.449,8.456,30.942,21.231,39.436v31.474h-22.44c-3.62-2.695-8.07-4.351-12.937-4.351c-12.021,0-21.771,9.742-21.771,21.771 c0,12.021,9.75,21.764,21.771,21.764c4.859,0,9.309-1.648,12.929-4.343h22.448v229.162c-44.95-3.681-84.14-18.043-110.176-53.036 l27.269,1.902c4.759,0.331,9.125-2.632,10.558-7.184c1.44-4.543-0.423-9.488-4.513-11.952l-69.816-42.086 c-2.896-1.74-6.461-1.963-9.542-0.577c-3.088,1.378-5.298,4.181-5.93,7.501l-15.14,80.104c-0.886,4.689,1.555,9.372,5.906,11.327 c4.351,1.965,9.472,0.686,12.399-3.088l16.287-21.008c31.843,51.565,81.914,94.736,139.664,105.942l21.854,21.854 c4.036,4.028,10.565,4.028,14.594,0l21.854-21.854c57.75-11.198,107.828-54.377,139.672-105.942l16.287,21.008 c2.927,3.774,8.048,5.053,12.398,3.088C439.349,366.309,441.79,361.626,440.904,356.937z M237.493,34.839 c6.9,0,12.513,5.614,12.513,12.514c0,6.9-5.613,12.514-12.513,12.514c-6.9,0-12.515-5.614-12.515-12.514 C224.979,40.453,230.593,34.839,237.493,34.839z'/%3E%3C/svg%3E">
  </a>
</div>
<div class="section-wrap__icon1">
  <a href="#">
    <img class="section-wrap__img img" src="data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='icon1.svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 474.986 474.986' style='enable-background:new 0 0 474.986 474.986;' xml:space='preserve'%3E%3Cpath id='XMLID_3_' fill='red' d='M440.904,356.937l-15.139-80.104c-0.632-3.32-2.842-6.123-5.93-7.501c-3.081-1.386-6.647-1.163-9.542,0.577 l-69.815,42.086c-4.09,2.464-5.954,7.408-4.514,11.952c1.434,4.552,5.799,7.515,10.559,7.184l27.269-1.902 c-26.037,34.993-65.227,49.355-110.178,53.036V153.103h22.449c3.62,2.695,8.07,4.343,12.929,4.343 c12.021,0,21.771-9.742,21.771-21.764c0-12.029-9.75-21.771-21.771-21.771c-4.867,0-9.318,1.656-12.938,4.351h-22.441V86.789 c12.776-8.494,21.231-22.987,21.231-39.436C284.845,21.247,263.6,0,237.493,0c-26.107,0-47.354,21.247-47.354,47.353 c0,16.449,8.456,30.942,21.231,39.436v31.474h-22.44c-3.62-2.695-8.07-4.351-12.937-4.351c-12.021,0-21.771,9.742-21.771,21.771 c0,12.021,9.75,21.764,21.771,21.764c4.859,0,9.309-1.648,12.929-4.343h22.448v229.162c-44.95-3.681-84.14-18.043-110.176-53.036 l27.269,1.902c4.759,0.331,9.125-2.632,10.558-7.184c1.44-4.543-0.423-9.488-4.513-11.952l-69.816-42.086 c-2.896-1.74-6.461-1.963-9.542-0.577c-3.088,1.378-5.298,4.181-5.93,7.501l-15.14,80.104c-0.886,4.689,1.555,9.372,5.906,11.327 c4.351,1.965,9.472,0.686,12.399-3.088l16.287-21.008c31.843,51.565,81.914,94.736,139.664,105.942l21.854,21.854 c4.036,4.028,10.565,4.028,14.594,0l21.854-21.854c57.75-11.198,107.828-54.377,139.672-105.942l16.287,21.008 c2.927,3.774,8.048,5.053,12.398,3.088C439.349,366.309,441.79,361.626,440.904,356.937z M237.493,34.839 c6.9,0,12.513,5.614,12.513,12.514c0,6.9-5.613,12.514-12.513,12.514c-6.9,0-12.515-5.614-12.515-12.514 C224.979,40.453,230.593,34.839,237.493,34.839z'/%3E%3C/svg%3E">
  </a>
</div>

PS: скачиваем svg и добавляем ее на место <img>, классы не переносил...

4
  • Нет, это не сработало 4 июн 2019 в 12:42
  • @FrencOlesov куда Вы и что добавили в Ваш код? 4 июн 2019 в 12:44
  • Тогда давайте колдовать с помощью JS. У меня нет представлений на этот счет. 4 июн 2019 в 12:44
  • В icon1.svg к path. Но, это сработало. 4 июн 2019 в 12:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.