Как ограничить стиль CSS для применения только к определенному SVG?

Question

У меня есть несколько SVG, которые я бы хотел стилизовать с помощью CSS. Тем не менее, стили, кажется, применяются в SVG.

К сожалению, я не могу использовать классы для элементов SVG или iframe.

Есть ли способ применить стили только к определенному SVG?

Вот пример, где в SVG используются разные стили, но второй, очевидно, относится к первому.

<svg>
  <style>
    line {
      stroke: red;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100">
</svg>

<svg>
  <style>
    line {
      stroke: blue;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100">
</svg>

https://codepen.io/anon/pen/LmmyEe

Редактировать

Может быть, это лучший пример:

<svg>
  <style>
    .colored {
      stroke: red;
    }
  </style>
  <line class="colored" x1="0" y1="0" x2="100" y2="100">
</svg>

<svg>
  <style>
    .colored {
      stroke: blue;
    }
  </style>
  <line class="colored" x1="0" y1="0" x2="100" y2="100">
</svg>

Я хотел бы иметь возможность разрешить пользователю редактировать стиль каждого из этих SVG, чтобы пользователю было необходимо знать только то, что класс делает для всех SVG. Если бы я использовал разные классы, такие как "Colored1" и "Colour2" или около того, это сделало бы его более хитрым для пользователя, которого я хочу избежать.

Answer 1

Вы можете выбрать их, используя nth-child или аналогичный селектор:

svg:nth-child(1) line {
  stroke: black;
}

<svg>
  <style>
    line {
      stroke: red;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

<svg>
  <style>
    line {
      stroke: blue;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

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

Или вы можете использовать встроенные стили в своих SVG (но я думаю, если вы не можете добавлять классы, вы не можете редактировать SVG)

Answer 2

Если вы знаете, как ваши SVG размещаются в вашем HTML, и нет способа добавить ID или классы, вы можете положиться на nth-of-type / nth-child, чтобы ограничить свои правила только одним элементом :

<svg>
  <style>
    svg:nth-of-type(1) line {
      stroke: red;
    }
  </style>
<line x1="0" y1="0" x2="100" y2="100"/>
</svg>

<svg>
  <style>
    svg:nth-of-type(2) line {
      stroke: blue;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

И выше тоже самое, что и при использовании внешнего CSS:

svg:nth-of-type(1) line {
  stroke: red;
}

svg:nth-of-type(2) line {
  stroke: blue;
}

<svg>

<line x1="0" y1="0" x2="100" y2="100"/>
</svg>

<svg>

  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

---

Другая идея состоит в том, чтобы использовать переменную CSS, которую вы определили в SVG (или в оболочке) в качестве встроенного стиля:

line {
  stroke: var(--s,#000);
}

}

<svg style="--s:red">
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>
<span style="--s:green">
<svg >
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>
</span>