0

Здравствуйте!

как правильно задать цвет фона у png имеющего прозрачные области и вставленного в svg как image элемент?

ни background-color, ни fill не работают:

image {
  fill: black;
  background-color: black;
}
rect {
  fill: green;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="400" height="300"></rect>
  <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" x="0" y="0" height="400px" width="300px" />
</svg>

https://fiddle.jshell.net/6j2dLej5/

Спасибо

4
  • а какой результат ожидается если в картинке прозрачные области?
    – Grundy
    29 мар 2016 в 7:42
  • по задумке прозрачные области будут заданного цвета, как в css+html. из кода можно динамично менять цвет изображения
    – ravend
    29 мар 2016 в 7:50
  • 1
    судя по всему никак, только как в примере - подкладывая под картинку прямоугольник например.
    – Grundy
    29 мар 2016 в 7:53
  • на image в svg вообще стили действуют, может я что то делаю не так? добавил бордюр, но он не отобразился: fiddle.jshell.net/6j2dLej5/1
    – ravend
    29 мар 2016 в 8:12

1 ответ 1

1

Есть такой вариант http://codepen.io/CreativeSeo33/pen/QNagYJ

<div class="icon icon-red"></div>

.icon {
  width: 500px;
  height: 500px;
  display: inline-block;       
  background:url(https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png) no-repeat 50% 50%;}
  .icon-red { background-color: red; }

Зачем картинку именно через svg выводить?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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