我通过从透明PNG转换它来创建了此SVG。我想使用它，但需要在内部用一种颜色填充“ i”。 现在它是透明的。
有没有办法做到这一点？用颜色填充它吗？
我在CodePen上有它。
https://codepen.io/randometc/pen/Pdbzdd
<svg id="svg" version="1.1" width="400" height="400" viewBox="0 0 400
400" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" ><g id="svgg"><path
id="path0" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750
18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548
271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771
307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375
18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823
C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903
146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770
83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008
175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357
231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120
278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059
287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124
283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195
295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875
302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575
280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339
195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485
183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264
184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332
171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 "
stroke="none" fill="#000000" fill-rule="evenodd"></path><path
id="path1" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750
18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548
271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771
307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375
18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823
C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903
146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path2" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path3" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path4" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path></g></svg>
答案 0 :(得分：1)
只需在开始处添加一个近似大小的实心圆。
<svg id="svg" version="1.1" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g id="svgg"><circle fill="blue" cx="200" cy="200" r="150"/><path id="path0" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path1" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path2" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path3" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path4" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill="#000000" fill-rule="evenodd"></path></g></svg>
答案 1 :(得分：0)
fill-rule="evenodd"在您的路径上造成了一个洞。您只需在后面放置一个“命名您的颜色”矩形。
另外：您重复了相同的路径，所以我删除了多余的路径。
<svg id="svg" version="1.1" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g id="svgg">
<rect fill="red" x="100" y="65" width="200" height = "250" />
<path id="test" d="M187.375 18.164 C 186.825 18.208,184.744 18.363,182.750 18.509 C 104.064 24.247,37.115 83.506,21.509 161.230 C -0.548 271.072,81.512 373.504,193.500 375.917 C 286.453 377.921,365.771 307.642,375.113 215.000 C 385.770 109.308,302.472 17.520,196.375 18.044 C 191.975 18.066,187.925 18.120,187.375 18.164 M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871 C 216.903 146.835,185.788 136.394,185.658 112.750 C 185.564 95.558,202.770 83.178,220.301 87.823 M193.036 161.512 C 212.655 163.497,223.008 175.187,221.761 193.949 C 221.056 204.551,221.049 204.580,213.357 231.750 C 204.889 261.658,204.164 264.895,204.139 272.875 C 204.120 278.976,204.888 281.479,207.498 283.826 C 212.127 287.987,225.059 287.887,235.589 283.608 C 236.411 283.274,237.102 283.029,237.124 283.063 C 237.146 283.097,236.496 285.864,235.679 289.212 L 234.195 295.299 233.285 295.682 C 231.001 296.645,217.243 301.823,213.875 302.988 C 191.395 310.761,168.677 305.477,160.982 290.686 C 155.575 280.294,156.513 271.104,166.615 235.500 C 176.322 201.288,177.339 195.507,174.991 187.905 C 172.679 180.420,161.822 178.620,147.485 183.345 C 145.225 184.090,143.343 184.669,143.303 184.632 C 143.264 184.595,143.920 181.815,144.760 178.454 L 146.289 172.343 147.332 171.943 C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none" fill-rule="evenodd"></path></g>
</svg>
另一种方法是像这样通过“ M”（移动到）来分割路径：
<svg id="svg" version="1.1" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g id="svgg">
<path id="test" d="M187.375 18.164
C 186.825 18.208,184.744 18.363,182.750 18.509
C 104.064 24.247,37.115 83.506,21.509 161.230
C -0.548 271.072,81.512 373.504,193.500 375.917
C 286.453 377.921,365.771 307.642,375.113 215.000
C 385.770 109.308,302.472 17.520,196.375 18.044
C 191.975 18.066,187.925 18.120,187.375 18.164" />
<g id="i" fill="red">
<!-- i dot -->
<path d="M220.301 87.823 C 239.254 92.844,246.530 115.141,233.695 128.871
C 216.903 146.835,185.788 136.394,185.658 112.750
C 185.564 95.558,202.770 83.178,220.301 87.823" />
<-- i body -->
<path d="M193.036 161.512
C 212.655 163.497,223.008 175.187,221.761 193.949
C 221.056 204.551,221.049 204.580,213.357 231.750
C 204.889 261.658,204.164 264.895,204.139 272.875
C 204.120 278.976,204.888 281.479,207.498 283.826
C 212.127 287.987,225.059 287.887,235.589 283.608
C 236.411 283.274,237.102 283.029,237.124 283.063
C 237.146 283.097,236.496 285.864,235.679 289.212
L 234.195 295.299 233.285 295.682
C 231.001 296.645,217.243 301.823,213.875 302.988
C 191.395 310.761,168.677 305.477,160.982 290.686
C 155.575 280.294,156.513 271.104,166.615 235.500
C 176.322 201.288,177.339 195.507,174.991 187.905
C 172.679 180.420,161.822 178.620,147.485 183.345
C 145.225 184.090,143.343 184.669,143.303 184.632
C 143.264 184.595,143.920 181.815,144.760 178.454
L 146.289 172.343 147.332 171.943
C 172.432 162.300,181.153 160.310,193.036 161.512 " stroke="none"></path></g></g>
</svg>