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

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

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

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

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

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

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

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

Ответ 3

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

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

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