如何将填充应用于此路径？

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>

但是，如果您需要保留实际形状并用其他颜色填充它，在这种情况下，您可以从开始到第一个z复制路径d中的所有内容，并使用复制的内容创建其他路径部分作为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>