Как мне применить заливку к этому Пути?

Question

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

<Path d="M205 3521 l-200 -117 -2 -240 -3 -239 204 -117 204 -116 204 118 203 118 0 243 0 243 -195 113 c-107 62 -199 112 -205 112 -5 0 -100 -53 -210 -118z m395 -38 l170 -98 -3 -214 -2 -214 -178 -104 -179 -104 -179 103 -179 102 0 211 1 210 177 102 c97 56 183 103 189 103 7 0 89 -44 183 -97z" fill="red" />

Я использую React Native, но синтаксис тот же. Заполнение пути красный относится к внешней границе.

Answer 1

У вас уже есть путь с заливкой. Однако это путь с дырой.

Одним из решений вашей проблемы будет удаление всего в атрибуте d вашего пути от m395 -38 до конца. (Это часть отверстия)

svg{border:1px solid;width:85vh;}

<svg viewBox ="0 2690 820 950">
<path id = "kk" 
      d="M205 3521 
         l-200 -117 
         -2 -240 
         -3 -239 
         204 -117 
         204 -116 
         204 118 
         203 118 
         0 243 
         0 243 
         -195 113 
         c-107 62 -199 112 -205 112 
         -5 0 -100 -53 -210 -118z 
         " fill="red" />
</svg>

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

svg{border:1px solid;width:85vh}

<svg viewBox ="0 2690 820 950">
  
<path d="M205 3521 
         l-200 -117 
         -2 -240 
         -3 -239 
         204 -117 
         204 -116 
         204 118 
         203 118 
         0 243 
         0 243 
         -195 113 
         c-107 62 -199 112 -205 112 
         -5 0 -100 -53 -210 -118z" fill="skyBlue"/>
<path 
      d="M205 3521 
         l-200 -117 
         -2 -240 
         -3 -239 
         204 -117 
         204 -116 
         204 118 
         203 118 
         0 243 
         0 243 
         -195 113 
         c-107 62 -199 112 -205 112 
         -5 0 -100 -53 -210 -118z 
         m395 -38 
         l170 -98
         -3 -214 
         -2 -214 
         -178 -104 
         -179 -104 
         -179 103 
         -179 102 
         0 211 
         1 210 
         177 102 
         c97 56 183 103 189 103
         7 0 89 -44 183 -97z" fill="red" />
  
  
  
</svg>