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

[Anonymous]

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

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

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

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

Код: Выделить всё

line {
stroke: red;
}






line {
stroke: blue;
}

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

Изменить >

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

Код: Выделить всё

.colored {
stroke: red;
}






.colored {
stroke: blue;
}

Я хотел бы позволить пользователю редактировать стиль каждого из этих SVG, чтобы пользователю нужно было знать только то, что класс делает для всех SVG. Если бы я использовал разные классы, например «colored1» и «colored2» или около того, это усложнило бы задачу для пользователя, чего я хочу избежать.

Подробнее здесь: https://stackoverflow.com/questions/502 ... r-svg-only