Я сделал свой первый опыт работы с <path>
на SVG и было интересно, есть ли лучший способ сделать это. Пример получился, как я хотел, только в этих зонах, указанных на рисунке, черный цвет, а остальное, как прозрачный фон (а не только белый).
Мой код:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M200 10 L10 10 L30 30 L50 30 L50 35 L35 35 L35 70 L30 70 L30 30 L10 10 L10 160 L50 120 L50 160 L80 160 L160 80 L160 50 L130 50 L50 130 L50 120 L160 10 L170 10 L150 30 L180 30 L180 60 L200 40 L200 50 L50 200 L40 200 L60 180 L30 180 L30 150 L10 170 L10 200 L200 200 L180 180 L160 180 L160 175 L175 175 L175 140 L180 140 L180 180 L200 200 Z" />
</svg>
Посмотрите на путь, начиная с зеленого шарика, за оранжевой линией, до красного шарика. На голубую линию не обращайте внимание с Z = closepath
Я использовал только команду L
, так как мне еще предстоит узнать, как работают другие команды <path>
. М
,- чтобы начать и Z
- до конца, так я думаю.
Мой способ обучения следующий,- читать меньше, но много тестировать. Таким образом, есть ли какие-либо предложения для тех, кто начинает изучать SVG, то есть не просто ссылки на путеводители или учебники для начинающих? Это высказывание, вероятно, получит какие-то минусы.
Источник: My first svg image