Изменить свойства svg подключенного через object?

Question

[Nimbus1996]

Есть svg, очень большое svg и поэтому вставлять его inline не хочется. Мне нужно при наведении менять fill у некоторых элементов path, я думаю, что вставлять svg можно тогда через object и менять свойства через js, подскажите как, обшарил инет и ничего не нашёл, что решило бы мою проблему.

Comments

[Ankhena]

Для object стили пишутся внутри svg.
https://svgontheweb.com/ru/#implementation

Либо вставляйте как элемент спрайта через use.

[Nimbus1996]

Ankhena, в use там теневой блок и поменять стили внутри этого блока не получается

[Nimbus1996]

Ankhena, мне нужно прописать в svg этот код <?xml-stylesheet type="text/css" href="style.css"?> и тогда я смогу менять стили svg в файле style.css, правильно понимаю? Что делать со свойствами fill и stroke в самом svg, удалять? Они ведь имеют больший приоритет и стили из внешнего css их не перебивают.

[Ankhena]

Nimbus1996,

Что делать со свойствами fill и stroke в самом svg, удалять? Они ведь имеют больший приоритет и стили из внешнего css их не перебивают.

Как-то вы одновременно пишете и вопрос и сразу ответ на него.

Не очень понятно, зачем вам к внешнему svg еще и внешний css, но кто же знает, что это за SVG у вас такая и что вообще в проекте творится.

[Nimbus1996]

Ankhena, alexandersh-dev.h1n.ru
Ссылка на страницу, сейчас там через замену bg сделано, мне нужно какое-то более лаконичное решение. При наведении на блок svg становится зелёным а другие серым и увеличивается немного

[Ankhena]

Nimbus1996, через filter grayscale не вариант?

[Nimbus1996]

Ankhena, возможно и вариант, объясните вкратце пожалуйста

[Ankhena]

Nimbus1996, 3 svg, в обычном состоянии под фильтром, при наведении без него.
https://html5book.ru/css3-filtry/
https://jsfiddle.net/Ankhena/w4mvd07c/

Хм.. первый раз смотрела, крестик был тоже серым, а не красным.
Если крестик красный в обоих состояниях, то его оставляем через fill в самой svg, всё остальное меняем через fill в css. И это будет работать и с use.

[Nimbus1996]

Ankhena, как менять?)) не шарю ничего в svg, можно ссылку на объяснение или как-то пошагово написать как добиться результата?)

[Nimbus1996]

Ankhena, Может забить на этот крестик и делать через grayscale? Вторая проблема в том, что при наведении изображение увеличивается, как это можно реализовать, через scale я думаю не получится потому что изображение должно быть прижато к низу и увеличиваться только в стороны и вверх

[Ankhena]

Nimbus1996, как-то так https://jsfiddle.net/qo102z8x/

[Ankhena]

Nimbus1996,

через scale я думаю не получится потому что изображение должно быть прижато к низу и увеличиваться только в стороны и вверх

Ничего не мешает задать transform-origin.
В моей песочнице выше это сделано именно так.

[Ankhena]

Nimbus1996,

Может забить на этот крестик и делать через grayscale?

Если крестику нужен красный, то оставляем его fill в svg.
Для остальной части меняем fill через css.
Тогда это прокатит, даже если спрайт будет внешним.

[Nimbus1996]

Ankhena, т.е. удалить все fill кроме fill крестика и в css то что писать? Svg{fill:#color} или использовать grayscale?

[Ankhena]

Nimbus1996, grayscale сделает серым всю картинку целиком.
Если крестик оставлять красным, то через fill, как обычно.

[Nimbus1996]

Ankhena, спасибо за Ваше терпение и помощь пойду пробовать;)

[Максим]

Nimbus1996, а конкретно что надо менять ?

[Nimbus1996]

Много Чего, при наведении менять цвет svg с темно-серого на зелёный, а у других в этот момент на светло-серый и зелёное svg увеличивается в размере