如何在SVG中填充颜色？

Question

如您所见，现在有一种叶子设计，我想在路径内部填充颜色。如何在路径中填充颜色？

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
    <g>
    <path xmlns="http://www.w3.org/2000/svg" d="M474.3317,189.2365c-9.7141-25.1595-21.4157-47.0413-34.8712-65.4135c-0.5832-0.8164-7.5508-9.8753-7.6021-9.942   c-0.0513,0.0667-7.0189,9.1256-7.6021,9.942c-13.4555,18.3722-25.1571,40.2539-34.8712,65.4135   c-13.9874,35.9658-14.1643,68.3462-0.6634,97.151c1.2557-0.5663,2.4781-1.0043,3.6282-1.336l0.1813-0.0521l0.183-0.0455   c1.747-0.4327,3.7561-0.7359,5.9563-0.7779l-0.2059-0.4545l-0.1166-0.2484c-13.0646-26.8498-12.9622-56.4951,0.3218-90.6519   c9.2159-23.8686,20.3643-44.8814,33.1884-62.5314c12.7972,17.5991,23.9612,38.633,33.1972,62.5545   c13.2753,34.1338,13.3776,63.7791,0.3135,90.6289l-0.0598,0.1234l-0.2436,0.538c2.2451,0.0332,4.2935,0.339,6.0707,0.7792   l0.183,0.0456l0.1814,0.052c1.1206,0.3232,2.3106,0.75,3.5324,1.2952C488.4956,257.522,488.306,225.1686,474.3317,189.2365z"/>
    </g>
    </svg>

Answer 1

您的图形以双封闭轮廓绘制。

因此，仅填充两个轮廓之间的区域。

要用颜色填充整个形状，需要用单个轮廓绘制它。

下面是一个轮廓图。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve"> 
 
<g>
<path  fill="purple" stroke="black" stroke-width="2" d="m475 286.3c13.5-28.8 13.3-61.1-0.7-97.1-9.7-25.2-21.4-47-34.9-65.4-0.6-0.8-7.6-9.9-7.6-9.9-0.1 0.1-7 9.1-7.6 9.9-13.5 18.4-25.2 40.3-34.9 65.4-14 36-14.2 68.3-0.7 97.2 31.8 1.1 64.6-0.2 86.3-0.1"/>
</g>
</svg>

Answer 2

正如@Alexandr_TT在他的回答中提到的那样，您需要简化路径：接下来是您可以填写的简化路径：

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

<svg viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
<g>
<path fill="green" stroke="black" stroke-width="5"
      d="M475.033, 286.3066 
         C488.4956, 257.522 488.306, 225.1686 474.3317, 189.2365
         C464.6176, 164.077 452.916, 142.1952 439.4605, 123.823 
         C438.8773, 123.0066 431.9097, 113.9477 431.8584, 113.881 
         C431.8071, 113.9477 424.8395, 123.0066 424.2563, 123.823 
         C410.8008, 142.1952 399.0992, 164.0769 389.3851, 189.2365 
         C375.3977, 225.2023 375.2208, 257.5827 388.7217, 286.3875 
         " /> 
</g>
  
 
</svg>