Почему svg не показывается?

Question

[olya_097]

на 25 строке
https://jsfiddle.net/1ey7fvs6/

Answer 1

[Ankhena]

Оно, конечно, показывается. Но влезает только левый угол картинки. А он прозрачный.
Поэтому вам кажется, что не показывается.
У background есть еще size, repeat и position.

Comments

[ReaverJS]

background-size: contain;

[Ankhena]

ReaverJS, неа, не contain, потому что Оле нужно 5 звездочек.

[ReaverJS]

Ankhena,
Так правильно же. Background сожмет svg до вмещения по вертикали и будет повторять по горизонтали.

[Ankhena]

ReaverJS, хотя я не права, конечно, contain тоже, возможно, пойдет, но еще repeat типа space

[Ankhena]

ReaverJS, угу

[olya_097]

ReaverJS, это да
спасибо
но как мне красным делать содержимое звездочки? сейчас лишнее закрашиваеться

[Ankhena]

olya_097, самое простое сделать звездочку прозрачной, а все остальное нет.
Чтобы не играть во всякие blend-mod'ы

[ReaverJS]

olya_097, CSS стилем изменять background-image нельзя. Так что 3 варианта:
1) Сделайте svg наоборот - чтобы внутри звездочка была прозрачная, а снаружи - закрашенная в цвет фона.

2) Вставлять svg не background-image-ем, а в DOM. Тогда можно будет править svg с помощью JS.

3) Сделать другой SVG - сразу с 5 звездами-масками и фоном, а управлять уже только фоном с помощью stroke-dashoffset.

[olya_097]

Ankhena, просто нужно в одном состоянии- серой ее делать
когда не двигаем

а когда двигаем- оранжевой
только звездочку

[olya_097]

ReaverJS,
2) Вставлять svg не background-image-ем, а в DOM. Тогда можно будет править svg с помощью JS.

а как именно управлять? там же два path

[olya_097]

ReaverJS, Вы сбросили css.yoksel.ru/svg-masks
у меня он почему то не открывается

[Ankhena]

olya_097, у нижнего блока фон как у звездочек в обычном состоянии.
Потом красный.
Сами звезды прозрачные, вокруг них цвет, белый или какой там.

[ReaverJS]

olya_097,

2) Вставлять svg не background-image-ем, а в DOM. Тогда можно будет править svg с помощью JS.

а как именно управлять? там же два path

Да, придется переделывать svg, Чтобы fill - был градиент от 0 до Х - красный, от Х до 100 - белый.

Вы сбросили css.yoksel.ru/svg-masks
у меня он почему то не открывается

Странно. У меня работает.

Намного легче сделать как советует Ankhena

[Максим]

olya_097, я скинул но почту готовое...

[Ankhena]

Максим Ленский, не хотите сюда тоже выложить? Не редкая ведь задача

[Максим]

Ankhena, лень

[Ankhena]

Максим Ленский, этот аргумент мне знаком и понятен)))