Атрибут fill в SVG. Каково значение по умолчанию? Для чего указывать fill="none"?
В учебных заданиях можно увидеть использование атрибута "fill" со значением "none". Особенно смущает такое указание для линий!!!
<line fill="none" stroke="black" x1="50" y1="50" x2="200" y2="50"/>
Зачем вообще указывать fill для линии? Да и для других фигур, если я хочу оставить их прозрачными. Есть ли значение по умолчанию? Наследуются ли fill от предка и как разрешаются конфликты?
Ответы (2 шт):
Атрибут fill имеет два значения в зависимости от используемого контекста.
По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут fill может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.
Для фигур и текста атрибут fill является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения fill-rule атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS
Насчёт стоит ли указывать: не думаю что является ошибкой, хотя по логике работает только когда путь фигуры заканчивается началом (closePath - Z).
В учебных заданиях можно увидеть использование атрибута "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>
Вывод
- fill="none" служит для удаления дефолтной, чёрной закраски внутреннего пространства у криволинейных фигур
- Для прямых линий параметр
fillне играет никакого значения.
Указание fill="none" не вызывает ошибку, видимо поэтому и встречается в учебных примерах для прямых линий.