В HTML рекомендуется отделить контент от стиля, поэтому вы должны создать внешние CSS файлы для своих стилей. Поскольку я только начинаю с SVG, я теперь задаюсь вопросом: распространяется ли это правило на SVG?
Что считается лучшим стилем кода?
<circle fill="yellow" /><circle style="fill: yellow;" />Я обычно предпочитал бы <circle fill="yellow" /> до <circle style="fill: yellow;" />, потому что он короче и легко манипулировать, например, getAttributeNS(null, "fill").
Но над этим я бы предпочел использовать отдельный элемент стиля, как и в случае с HTML, например:
<style>
circle{
fill: yellow;
}
</style>
который имеет все те же преимущества использования CSS, например, что позволяет легко изменять стиль множества элементов одновременно.
Вы также можете поместить свой CSS во внешний файл и добавить:
<?xml-stylesheet type="text/css" href="your_CSS.css" ?>
Перед элементом svg.
Я прибыл сюда, потому что пытался вспомнить, имеют ли атрибуты или стили больший приоритет. Это одна из практических причин, почему вы хотите, чтобы один над другим.
Атрибуты применяются в качестве "подсказок представления", как если бы они были первыми из каскадных таблиц стилей. Другими словами, это дает им самый низкий приоритет.
Таким образом, приоритет от низшего к высшему равен
Это немного сбивает с толку, что встроенный стиль имеет гораздо больший приоритет, чем атрибут, с которым он рядом. (Я продолжаю искать это!)
Новых атрибутов презентации не будет, и вместо этого мы рекомендуем использовать стилизацию CSS, но это не похоже на то, что атрибуты представления исчезнут в ближайшее время.
Более подробную информацию можно найти в разделе Атрибуты презентации главы "Стиль" стандарта SVG.
Разница всегда заключается в содержании или презентации.
Если круг является содержимым, и он должен показать, доступен ли css или нет, тогда первым вариантом будет один.
Но если круг является лишь частью сайта и не добавляет ничего в контент, тогда он должен быть вторым вариантом. Или используйте класс css.