SVG как изменение цвета фона изображения

Я создал значок SVG как менее переменная:SVG как изменение цвета фона изображения

@logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 792"><path fill="@{t-body-color}" d="M281.4,463.6h-11.3c0,0,0.6-17.5-2-35.7c14.2-15.2,19.8-46.4,19.8-46.4s7,1.7,11.6-21.5c4.7-23.1-4.7-26.8-4.7-26.8s0.6-40,2-62.5c1.3-17.9-10.3-28.2-14.9-31.5c-1.3-1-2-2.3-2.3-3.9c-1.3-8.6-6.2-36.5-14-43.7c-16.9,20.8-102,36.7-102,36.7c-27.8,7-33.8,31.5-32.8,42.4c2,22.5,2,62.5,2,62.5s-9.5,3.7-4.7,26.8c4.7,23.1,11.6,21.5,11.6,21.5s6,31.1,19.8,46.4c-2.7,18.6-2,35.7-2,35.7h-11.3c-1,0-2,0.6-2,1.7c-1.3,6.2-0.6,24.5-9.5,30.5c-26.2,17.1-135.1,49.6-135.1,76V702h428.3V595.3c0-50.1-108.9-82.5-135.1-99.6c-9.3-6-8.3-24.5-9.5-30.5C283.1,464.2,282.4,463.6,281.4,463.6L281.4,463.6zM465.9,471.5v-22.2c0,0,48.7-4.3,63.3-41.4c-15.2-5-34.8-16.5-41.1-48.3c-3.9-20.2,5.6-60.6-3.3-77.1c-5.3-9.5-16.9-20.2-29.1-21.2c-7.3-16.3-31.5-20.8-44.4-20.8c-32.1,1-59,17.5-71.8,42.1c-8.9,16.5,0.6,56.9-3.3,77.1c-6.2,31.8-25.8,43.1-41.1,48.3c14.6,37.5,63.3,41.4,63.3,41.4v22.2c-1,0-10.6,3.3-18.2,29.5c-1,0.6,1.3,3.7,3.7,4.7c60.2,25.2,96.7,50.1,96.7,90.1v106.7H612c0,0,0.4-122.5,0-130.2c-1.3-23.9-101.3-56.3-128.2-71.2C476.5,474.8,466.8,471.5,465.9,471.5L465.9,471.5z"/></svg>');`

и добавлены в качестве фона изображения:

.logo-white { 
    background: @logo center center no-repeat; 
    background-size: auto @logo-h; 
    width: 5rem; 
    height: @logo-h !important; 
    z-index: 1000000; 
}

и я хочу, чтобы иметь возможность изменить цвет заливки с помощью css, это каким-то образом я могу это сделать?

источник

2015-05-19 Max Mykal

Нет. У изображений нет DOM. –

Возможно, но вам нужно повторить, как вы используете SVG-файл. Вместо того, чтобы вызывать его через CSS, вы загружаете SVG один раз в начале вашего документа, а затем вы можете вызвать <use xlink:href="#id"></use>, где изображение идет в вашем документе, а затем вы можете применить к нему атрибут fill.

Так, например, загрузить SVG встроенный в документ следующим образом:

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" style="display:none;"> 
    <defs> 
     <g id="shape"> 
      <rect width="100%" height="100%" /> 
     </g> 
    </defs> 
</svg> 

</body> 
</html>

Затем в HTML, где, что отображается изображение, ссылки на которые SVG как так:

<svg viewBox="0 0 300 200"> 
    <use xlink:href="#shape"></use> 
</svg>

Вы можете затем стиль, который <svg> с использованием атрибута fill.

.red svg { 
    fill: red; 
} 
.blue svg { 
    fill:blue; 
}

См demo fiddle или find out more about this trick.

ОБНОВЛЕНИЕ: Вы конкретно указали фоновое изображение. Это не сработает, если вам нужно использовать background-image в CSS. Насколько я знаю, он работает только на встроенных SVG, подобных этому (не внешние SVG, SVG, вызываемые с тегом <img>, или CSS background-image).

источник

2015-05-19 19:53:50

SVG как изменение цвета фона изображения

ответ

Смежные вопросы