В HTML рекомендуется отделить контент от стиля, поэтому вы должны создать внешние CSS-файлы для своих стилей. Поскольку я только начинаю с SVG, я теперь задаюсь вопросом: распространяется ли это правило на SVG?SVG: Использовать атрибуты или CSS для стиля?
Что считается лучшим стилем кода?
<circle fill="yellow" /><circle style="fill: yellow;" />Я бы предпочел <circle fill="yellow" /> до <circle style="fill: yellow;" />, потому что он короче и легко управляется, например, с getAttributeNS(null, "fill").
Но за что я предпочел бы, используя отдельный элемент стиля, так же, как с HTML, например:
<style>
circle{
fill: yellow;
}
</style>
Который имеет все те же преимущества использования CSS, например, что делает его легко изменить Stlye из множество элементов сразу.
Вы также можете поместить ваш CSS во внешнем файле и добавить:
<?xml-stylesheet type="text/css" href="your_CSS.css" ?>
Перед элементом SVG.
Разница всегда, если это содержание или это представление.
Если круг является содержимым, и он должен показать, доступен ли css или нет, тогда первым вариантом будет один.
Но если круг является лишь частью сайта, и он ничего не добавляет к контенту, то он должен быть вторым вариантом. Или используйте класс css.
Хороший аргумент, но я бы перефразировал это несколько: если факт, что круг желтый, является контентом (возможно, рисунок персонажа из «Симпсонов»), он должен быть атрибутом; если тот факт, что круг желтый, является чисто случайным (и может быть приписан тому факту, что в остальной части публикации используется много желтого), это должно быть в CSS. –
Я приехал сюда, потому что я пытался вспомнить, имеют ли атрибуты или стили больше приоритета. Это одна практическая причина, по которой вы хотели бы получить один за другим.
Атрибуты применяются как «подсказки для презентации», как если бы они были первыми в каскадных таблицах стилей. In other words, this gives them lowest precedence.
Таким образом, преимущество, от низшего к высшему, является
Это немного сбивает с толку, что внутренний стиль имеет гораздо больше приоритет, чем атрибут, который он рядом. (Мне нужно все это посмотреть!)
Более подробную информацию можно найти в конце Presentation Attributes section of the SVG styling document.
Это также имеет то преимущество, что оно может потенциально сделать ваши SVG-файлы намного меньшими, заменив каждый повторяющийся атрибут на один стиль. –