Как при использовании SVG залить область внутри path?

Question

[Dymok]

Как можно залить область, ограниченную path каким-либо цветом? Пытаюсь использовать fill, но в таком случае заливается только сам path, а не его содержимое.
Пример

Answer 1

[Максим]

ну так fill это аналог background
а что бы сделать границу - применяют stroke :color; stroke-width:px;

Comments

[Dymok]

Но на моём примере почему-то не работает fill. Нужно залить фоном основную часть иконки, а при использовании fill заливается контур, то есть path

[Максим]

Dymok, да там просто path - я щас посмотрю что можно сделать - погоди минут с 15 -20

[Максим]

Dymok, https://jsfiddle.net/t7yhevn4/ вроде бы так - если что то не то скажи я исправлю

[Dymok]

Максим Ленский, все отлично, спасибо, а как это сделано? То есть почему в моем примере заливка не работала, а тут работает?

[Максим]

Dymok, у вас просто был path без заливки - если помог отметь решением

Answer 2

[Ivan Bogachev]

Путей два:

• Не морочьте себе голову, оставьте только один контур у этих объектов (уберите все, что есть после буквы M в атрибуте d у #rocket-window и #rocket-outline) и поместите #rocket-window после #rocket-outline в коде.
  
• Используйте fill-rule="nonzero" у этих объектов, но убедитесь, что оба контура (внутренний и внешний) нарисованы в одну сторону (по часовой или против).