Задать цвет картинке svg в файле со стилями

274

28 апреля 2017, 17:16

Имеется такое изображение в формате svg:

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Xiag-als-Arbeitgeber" transform="translate(-137.000000, -2751.000000)">
        <g id="Benefits" transform="translate(116.000000, 2223.000000)">
            <g id="Benefits-V3" transform="translate(2.000000, 107.000000)">
                <g id="Homeoffice" transform="translate(0.000000, 410.973704)">
                    <g id="Page-1">
                        <image x="19.8334826" y="10.8590897" width="32.608548" height="30" xlink:href="data:image/png;base64,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"></image>
                        <use fill="#F89B1C" fill-rule="evenodd" xlink:href="#rect-1"></use>
                    </g>
                </g>
            </g>
        </g>
    </g>
</g>

Не получается задать цвет в файле со стилями.

svg {
  fill: orange;
}

В чем может быть ошибка?

Answer 1

Как вариант можете добавить изображению тень:

span{ 
  position:relative; 
  display:inline-block; 
  overflow:hidden; 
} 
img { 
  transform: translateX(-100px); 
  filter: drop-shadow(100px 0 0 orange); 
}

<span> 
 <img src="data:image/png;base64,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"> 
  </span>

Answer 2

Хочу вас расстроить, но у вас нет векторной графики тут. У вас есть набор групп, а внутри объявлена обычная картинка черного цвета в теге <image>.

Вот эта:

<img src="data:image/png;base64,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">

Update:

Пример векторной картинки:

svg { 
  fill: orange; 
}

<svg width="100px" height="100px" viewBox="0 0 1000 1000"> 
  <g> 
    <path d="M990,513.7v-26.3l-175.7-11.8v-48.7L623.4,207L450.5,400.5l-412.8,39v350l153.4,14.8V663.1l73.3,1.6v146.6l168.5,16.2L976,774.7v-253l-162-8.9l0.5-8.8L990,513.7z M134.4,625l-62.3-0.1v-61.7l62.3-2.2V625z M71.3,462.4l62.3-5.8v63.9L71.3,524V462.4z M70.9,665.1l62.2,1.5v63.8l-62.2-3.6V665.1z M191.4,450.1l71.3-6.6v68.4l-71.3,4.1V450.1z M263.6,623.9h-71.4V558l71.4-2.5V623.9z M778.9,624l-56.3,0v-65.6l56.3,2V624z M779.4,663v63.5l-56.3,3.3v-65.5L779.4,663z M779.6,521l-56.3-3.6v-65.5l56.3,5.7V521z M603.4,666.9l63.8-1.4V733l-63.8,3.6V666.9z M602.7,624v-69.8l63.8,2.2V624H602.7z M603.6,509.5v-69.8l63.8,6.4v67.6L603.6,509.5z M477.4,669.7l72.2-1.6v71.8l-72.2,4.2V669.7z M548.3,624.1H476v-74.4l72.3,2.6V624.1z M477.1,427l72.2,7.3V506l-72.2-4.7V427z M824.1,661.9l50.3-1.1v60.1l-50.3,2.9V661.9z M823.6,624v-61.9l50.4,1.8V624L823.6,624L823.6,624z M398.4,623.5l-81.4,0.1v-70.3l81.4-2.9V623.5z M396.7,671.2v73.2l-81.3-4.8v-70.3L396.7,671.2z M316,438.2l81.3-7.6v73.2l-81.3,4.7V438.2z M957.8,716.1l-45.3,2.6V660l45.3-1V716.1z M957.4,624l-45.3,0v-58.7l45.3,1.6V624z"/> 
    <polygon points="623.5,193.7 822.4,423.6 854.3,423.8 633.6,172.4 137.1,281.2 10,403.8 10,433.2 446.1,392 "/> 
  </g> 
</svg>