1

As you can see there is leaf kind of design now I want to fill color inside path. How can I fill color in path?

<?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>

1
  • 2
    You can do it like this path { fill: green; } Commented Apr 5, 2019 at 7:22

2 Answers 2

4

Your figure is drawn in a double closed contour.

Therefore, only the area between the two contours is filled.

enter image description here

To fill the entire shape with color, you need to draw it with a single outline.

Below is a single contour figure.

<?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>

1
  • @Rushabh Shah If the answer was useful to you please remember to mark it as a solution. Commented Apr 7, 2019 at 13:32
2

As @Alexandr_TT mention in his answer you need to simplify the path: next comes your simplified path you can fill:

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.