Атрибут fill в SVG. Каково значение по умолчанию? Для чего указывать fill="none"?

В учебных заданиях можно увидеть использование атрибута "fill" со значением "none". Особенно смущает такое указание для линий!!!

<line fill="none" stroke="black" x1="50" y1="50" x2="200" y2="50"/>

Зачем вообще указывать fill для линии? Да и для других фигур, если я хочу оставить их прозрачными. Есть ли значение по умолчанию? Наследуются ли fill от предка и как разрешаются конфликты?


Ответы (2 шт):

Автор решения: De.Minov

Атрибут fill имеет два значения в зависимости от используемого контекста.

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

Для фигур и текста атрибут fill является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения fill-rule атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS


Насчёт стоит ли указывать: не думаю что является ошибкой, хотя по логике работает только когда путь фигуры заканчивается началом (closePath - Z).

→ Ссылка
Автор решения: Alexandr_TT

В учебных заданиях можно увидеть использование атрибута "fill" со значением "none". Особенно смущает такое указание для линий!!!

Если линия прямая, то применение fill="none" или fill="индекс цвета" абсолютно никакой роли не играет. Более того, если вы не укажете цвет stroke, то вы ничего не увидите:

  • fill="purple"

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<line x1="10" y1="50" x2="300" y2="300" fill="purple" />
</svg>     

  • Заполнение пурпурным цветом fill="purple" для прямой линии игнорируется и при stroke="green" stroke-width="4" будет показана линия зелёного цвета

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<line x1="10" y1="50" x2="300" y2="300" fill="purple" stroke="green" stroke-width="4" />
</svg>     

Криволинейный контур

Абсолютно без разницы, - будет замкнут контур или нет, внутренне пространство фигуры, будет окрашено в чёрный цвет, если не указать fill="none" Другими словами,- значение fill по умолчанию имеет чёрный цвет.

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<path d="M10,250 A100,100 0 0 1 210,250" />
</svg>    

  • Добавляем stroke

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<path stroke="red" stroke-width="4"  d="M10,250 A100,100 0 0 1 210,250" />
</svg>

  • Добавляем fill="none", то есть убираем закраску

  <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
             width="300" height="300" viewBox="0 0 300 300"  >  
    <path fill="none" stroke="red" stroke-width="4"  d="M10,250 A100,100 0 0 1 210,250" />
    </svg>

Все примеры выше работают и для текста SVG

  • stroke="red" stroke-width="4"

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<text x="50" y="200" font-size="200px"  stroke="red" stroke-width="4" stroke="red">T </text>
</svg>     

  • stroke="red" stroke-width="4" fill="none"

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<text x="50" y="200" font-size="200px" fill="none" stroke="red" stroke-width="4" stroke="red">T </text>
</svg>     

Вывод

  1. fill="none" служит для удаления дефолтной, чёрной закраски внутреннего пространства у криволинейных фигур
  2. Для прямых линий параметр fill не играет никакого значения.
    Указание fill="none" не вызывает ошибку, видимо поэтому и встречается в учебных примерах для прямых линий.
→ Ссылка