SVG: использовать атрибуты или CSS для стиля?

Question

В HTML рекомендуется отделять контент от стиля, поэтому вы должны создавать внешние CSS-файлы для своих стилей.Поскольку я только начинаю работать с SVG, я задаюсь вопросом: применимо ли это правило и к SVG?

Что считается лучшим стилем кода?

• <circle fill="yellow" />
• или <circle style="fill: yellow;" />

Answer 1

Я прибыл сюда, потому что пытался вспомнить, имеют ли атрибуты или стили больший приоритет.Это одна из практических причин, по которой вы хотите использовать один над другим.

Атрибуты применяются в качестве «подсказок для презентации», как если бы они были первыми из каскадных таблиц стилей. Другими словами, это дает им наименьший приоритет.

Таким образом, приоритет от низшего к высшему равен

1. атрибутов
2. стиль CSSлисты
3. встроенные стили

Немного запутано, что встроенный стиль имеет гораздо больший приоритет, чем атрибут, с которым он рядом.(Я продолжаю искать это!)

Там также не будет никаких дополнительных атрибутов представления, и мы поощряем использовать вместо этого стилизацию CSS, но это не похоже на то, что атрибуты представления собираютсяв ближайшее время.

Более подробную информацию можно найти в разделе Атрибуты презентации в главе «Стиль» стандарта SVG .

Answer 2

Я бы предпочел <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.

Answer 3

Разница всегда в том, что это контент или презентация.

Если кружок наполнен, и он должен показать, доступен ли css или нет, тогда первым вариантом будет тот.

Но если круг является лишь частью дизайна сайта и ничего не добавляет к контенту, то это должен быть второй вариант.Или используйте класс CSS.