Мое первое изображение SVG

322

13 февраля 2017, 13:45

Я сделал свой первый опыт работы с <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, то есть не просто ссылки на путеводители или учебники для начинающих? Это высказывание, вероятно, получит какие-то минусы.

комментарии:

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

Persijn - Согласен. Просто проверяю, если есть какие-либо хитрости или большинство программистов учатся сами "на своей шкуре". О SVG, что я мог знать, перед началом этих вопросов. – user7393973

Вам не кажется, что здесь должен быть вопрос, предполагающий конкретный ответ. Robert Longson

Robert Longson - действительно, это потому, что я не знаю, что просить/ожидать от SVG. Любые: советы, предупреждения, хорошо известные ошибки, чего не следует делать. Такие вопросы большинство начинающих делают и т. д.; оцениваются по достоинству. – user7393973

user7393973 Это не совсем то, это сайт вопросов/ответов. Robert Longson

RobertLongson - я знаю об этом. – user7393973

Ассоциация с ENSO @user7393973

Answer 1

Предполагаю, что вы хотите использовать команду "L" для фигур, у которых внутри должны быть отверстия. В этом случае вы должны использовать команду подпутей. То есть, используйте команду "move" - "М".
Вы не должны использовать соединительные линии, чтобы перейти от одной формы к другой, как вы сейчас делаете, по двум причинам:
В зависимости от рендера, полоски нулевой ширины иногда могут быть видны.

Специально для некоторых цветовых сочетаний.
Вы не можете использовать цвет обводки на фигуре, как вы хотите, видите зеленые перемычки между обводкой и галочками:

<svg width="200" height="200"> 
  <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" stroke="green" stroke-width="4"/> 
</svg>

Вот как вы должны делать это:
Создавайте замкнутые контуры для каждой из отдельных фигур на вашем пути.

// top left triangle
M 10 10 L 10 160 L 160 10 Z
// top left 'L'
M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z
// central shape
M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z
// top right chevron
M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z 
// bottom right triangle
M 200 50 L 50 200 L 200 200 Z
// bottom right 'L'
M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z
// bottom left chevron
M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z

Объединить все подпути, начинающиеся с команды "M" в один путь, и вы получите результат, который вы хотите. Смотри ниже.
Там, где перекрываются пути / пересекаются, они обычно образуют отверстия. Иногда они этого не делают, но если вы последовательны в том направлении, которое Вы используете, чтобы определить ваши пути (по часовой стрелке или против часовой стрелки), отверстия будут.
прим. переводчика: автор ответа имеет ввиду правило fill-rule

<svg width="220" height="220"> 
 
  <path d="M 10 10 L 10 160 L 160 10 Z 
           M 30 30 L 50 30 L50 35 L35 35 L35 70 L30 70 Z 
           M 50 130 L 50 160 L 80 160 L 160 80 L 160 50 L 130 50 L 50 130 Z 
           M 170 10 L 150 30 L 180 30 L 180 60 L 200 40 L 200 10 Z  
           M 200 50 L 50 200 L 200 200 Z 
           M 40 200 L 60 180 L 30 180 L 30 150 L 10 170 L 10 200 Z 
           M 180 180 L 160 180 L 160 175 L 175 175 L 175 140 L 180 140 Z"  stroke="green" stroke-width="4"/> 
 
</svg>

комментарии: Это действительно хороший момент. Я не знал, что команда "М" может быть использована таким образом. – user7393973

Ответил: Paul LeBeau