3

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

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

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

0

2 ответа 2

6

В учебных заданиях можно увидеть использование атрибута "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" не вызывает ошибку, видимо поэтому и встречается в учебных примерах для прямых линий.
3
  • То есть наследования никакого нет в плане свойства fill? Если группе или всему svg будет использовано fill='blue', на каждую отдельную фигуру внутри это никак не распространяется? Начал учебник по SVG animations, вроде начало бодрое, а потом быстро все на библиотеку ушло. Не могу найти путный учебный курс по SVG. Документация есть, но она не покрывает тем вроде лучших практик и так далее. Можете что-то посоветовать? Спасибо!
    – Leonid
    19 июл 2021 в 12:17
  • @Leonid не всё так просто в вопросе наследования и стилизации в SVG. Важную роль играет сложная система иерархии внутренних, внешних и стилей представления SVG: (fill="red") Также наивысший приоритет имеют computed style. Если интересна данная тема задай пожалуйста новый вопрос 19 июл 2021 в 17:37
  • @Leonid про анимацию SVG, вот одна из самых ценных статей (на мой взгляд) Все об SVG анимации 19 июл 2021 в 17:44
3

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

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

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


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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.