Как разукрасить SVG-спрайт?

Question

[weranda]

Приветствую.
Есть вот такой код (для примера привел только один элемент спрайта):

<svg display="none">
	<symbol id="thing" viewBox="0 0 123 35"">
		<rect x="45" width="35" height="35" />
		<circle cx="17.5" cy="17.5" r="17.5" />
		<path d="M107.5 2L122.655 28.25H92.3446L107.5 2Z" />
	</symbol>
</svg>

<svg class="icon-thing">
	<use xlink:href="#thing"></use>
</svg>

Можно ли разукрасить фигуры через стили без изменения кода спрайта и без сторонних библиотек?

Answer 1

[twobomb]

<svg display="none">
  <symbol id="thing" viewBox="0 0 123 35">
    <rect x="45" width="35" height="35"  />
    <circle cx="17.5" cy="17.5" r="17.5"/>
    <path d="M107.5 2L122.655 28.25H92.3446L107.5 2Z"/>
  </symbol>
</svg>

<svg class="icon-thing">
  <use xlink:href="#thing"></use>
</svg>

#thing rect{
  fill:blue;
}
#thing circle{
  fill:red;
}
#thing path{
  fill:yellow
}

Comments

[weranda]

Ход верный, но я привел весьма упрощенный пример, ответ лежит на поверхности. Мое упущение. Может быть, у вас есть соображения о том, что делать в таком случае:

<svg width="191" height="152" viewBox="0 0 191 152" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M161.5 60C158.5 59.8333 150 63 140 77V89.5L161.5 77L148.5 86.5C150.5 91.6667 154.9 102.4 156.5 104C158.1 105.6 166.167 107 170 107.5C175.167 104.167 185.9 97.1 187.5 95.5C189.1 93.9 184.167 78.8333 181.5 71.5L161.5 60Z"  />
	<path d="M189.5 133.5L142.5 129.5L133 133.5L130.5 146.5C134.5 147.833 143.6 150.5 148 150.5C152.4 150.5 152.833 144.5 152.5 141.5L170.5 150.5L189.5 133.5Z"  />
	<rect x="45" width="35" height="35" />
	<rect x="45" y="48" width="35" height="35" />
	<rect x="45" y="96" width="35" height="35" />
	<circle cx="17.5" cy="17.5" r="17.5" />
	<circle cx="17.5" cy="65.5" r="17.5" />
	<circle cx="17.5" cy="113.5" r="17.5" />
	<path d="M107.5 2L122.655 28.25H92.3446L107.5 2Z" />
	<path d="M107.5 50L122.655 76.25H92.3446L107.5 50Z" />
	<path d="M107.5 98L122.655 124.25H92.3446L107.5 98Z" />
	<line x1="133" y1="19.5" x2="156" y2="19.5" />
	<line x1="133" y1="36.5" x2="156" y2="36.5" />
</svg>

[Adamos]

weranda, в конце концов окажется, что вам надо политическую карту мира раскрасить... сразу конкретизировать задачу не судьба? Общего решения у нее, очевидно, нет.

[weranda]

Adamos, если конкретизировать все и сразу, то это иногда бывает излишним. Поэтому стараюсь упрощать.

[twobomb]

weranda, Не ну я конечно любил в детстве раскраски... Ну ладно вызов принят

<svg id="mysvg" width="191" height="152" viewBox="0 0 191 152" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M161.5 60C158.5 59.8333 150 63 140 77V89.5L161.5 77L148.5 86.5C150.5 91.6667 154.9 102.4 156.5 104C158.1 105.6 166.167 107 170 107.5C175.167 104.167 185.9 97.1 187.5 95.5C189.1 93.9 184.167 78.8333 181.5 71.5L161.5 60Z"  />
  <path d="M189.5 133.5L142.5 129.5L133 133.5L130.5 146.5C134.5 147.833 143.6 150.5 148 150.5C152.4 150.5 152.833 144.5 152.5 141.5L170.5 150.5L189.5 133.5Z"  />
  <rect x="45" width="35" height="35" />
  <rect x="45" y="48" width="35" height="35" />
  <rect x="45" y="96" width="35" height="35" />
  <circle cx="17.5" cy="17.5" r="17.5" />
  <circle cx="17.5" cy="65.5" r="17.5" />
  <circle cx="17.5" cy="113.5" r="17.5" />
  <path d="M107.5 2L122.655 28.25H92.3446L107.5 2Z" />
  <path d="M107.5 50L122.655 76.25H92.3446L107.5 50Z" />
  <path d="M107.5 98L122.655 124.25H92.3446L107.5 98Z" />
  <line x1="133" y1="19.5" x2="156" y2="19.5" />
  <line x1="133" y1="36.5" x2="156" y2="36.5" />
</svg>

#mysvg *:nth-child(1) {
  fill:red;
  stroke:blue;
}
#mysvg *:nth-child(2) {
  stroke:red;
}
#mysvg *:nth-child(3) {
  fill:yellow;
}
#mysvg *:nth-child(4) {
  fill:blue;
}
#mysvg *:nth-child(5) {
  fill:red;
}
#mysvg *:nth-child(6) {
  fill:red;
}
#mysvg *:nth-child(7) {
  fill:green;
}
#mysvg *:nth-child(8) {
  fill:purple;
}
#mysvg *:nth-child(9) {
  fill:green;
}
#mysvg *:nth-child(10) {
  fill:blue;
}
#mysvg *:nth-child(11) {
  fill:black;
}
#mysvg *:nth-child(12) {
  stroke:red;
}
#mysvg *:nth-child(13) {
  stroke:green;
}

P.S.Вы меня надурили, там одной линии не хватает, а на скрине она есть

[weranda]

twobomb, Ну, вы даете) А как думаете о том, что делать в случае, когда в первую позицию svg (там где #mysvg *:nth-child(1)) надо будет вставить дополнительный элемент и всего их станет 14 вместо 13 — тогда все цвета сместятся. Тогда надо будет к nth-child(n) прибавлять единицу. А если добавиться элемент не на первую позицию, а в центр и все это идет вразнобой, тогда надо будет много чего определять и менять. Тогда лучшим вариантом будет задать ID вместо nth-child(n) и станет возможным добавлять/удалять элементы и цвета останутся на своих местах...Спасибо.

[twobomb]

weranda, Ну лучше задать им классы или ид, или выбирать по элементу + nth-child, крч изучайте css селекторы. Многое для себя откроете

Answer 2

[godsplane]

svg { 
fill: red;
 }

Comments

[weranda]

И что тогда? — Круг, квадрат и треугольник станут красными? — Да, так и будет. Мне не то надо.