SVG fill inside path with no intersections












1















I'm trying to fill the following path and while I expected it to be filled inside the stroke line I get the following shape (black fill):



enter image description here



I've tried changing fill-rule from nonzero to evenodd but with the exact same result, what should I do?






<svg id="svg-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events">

      <path d="M12.112500563968936 -80.49999994829511L12.042182152685129 -82.22343949593682L11.831473217997551 -83.94682609775359L11.514855642847493 -85.6247322359464L11.128207005438131 -87.30258542831425L10.670952607720444 -88.93490521123317L10.143626097882809 -90.52211515130273L9.545981176761362 -92.06410935687299L8.877771545192232 -93.60610356244325L8.139489801503156 -95.01186816044131L7.295545716515463 -96.37209934899047L6.838578667822286 -97.00702568167824L6.3463087389749475 -97.59678922569168L5.818982229137315 -98.14101936025617L5.256393889006159 -98.63971608537176L4.658748967884712 -99.00255382368974L3.9904982864549403 -99.3198581525588L2.689628202634715 -99.6826958908768L1.3537425876848381 -99.95483743107152L0.017528573849803664 -100.00000021974586L-1.3183980909607182 -99.95483743107152L-2.654571054935106 -99.6826958908768L-3.9907850687701405 -99.3198581525588L-4.623445521021239 -99.00255382368974L-5.221336741306553 -98.63971608537176L-5.783925081437705 -98.14101936025617L-6.31125159127534 -97.59678922569168L-6.803521520122677 -97.00702568167824L-7.2605296186764985 -96.37209934899047L-8.10443265380355 -95.01186816044131L-8.87805832750743 -93.60610356244325L-9.545980610052048 -92.06410935687299L-10.143625531173495 -90.52211515130273L-10.67123939003564 -88.93490521123317L-11.128206438728816 -87.30258542831425L-11.51485507613818 -85.6247322359464L-11.796169771134078 -83.94682609775359L-12.007166054846163 -82.22343949593682L-12.112499997259626 -80.49999994829511M-12.112499982336715 30.499999485030372C-12.04536024551652 33.631911350749505 -11.566121434420666 35.815474903680865 -10.542819238747384 37.48436543988575C-7.486224840924649 42.4741625233618 -4.332682978296873 46.72232422699756 -0.9603581801688108 49.61208665697819A3.139072091761344 9.151898708905092 0 0 0 0.0004346053615336132 49.998513282651516H0.0004346053615336132A3.139072091761344 9.151898708905092 0 0 0 0.961227390891878 49.61208665697819C4.332684002767934 46.721480500740626 7.485936469978384 42.4741625233618 10.542820263218431 37.48436543988575C11.5658330634744 35.814631177423934 12.04536126998758 33.631911350749505 12.112501006807776 30.499999485030372M-12.1125 27.5A-760.2727435307559 -760.2727435307559 0 0 0 -12.1125 -77.5M12.1125 27.5A760.2727435307559 760.2727435307559 0 0 1 12.1125 -77.5M-12.1125 -77.5C-12.165129099635367 -78.25 -12.112500190734863 -79.75 -12.112500190734863 -80.5M12.1125 -77.5C12.165129099635367 -78.25 12.112500190734863 -79.75 12.112500190734863 -80.5M-12.1125 27.5C-12.165129099635367 28.25 -12.112500190734863 29.75 -12.112500190734863 30.5M12.1125 27.5C12.165129099635367 28.25 12.11250114440918 29.75 12.11250114440918 30.5 " fill="blue" fill-rule="nonzero" stroke="red" transform="matrix(0,1,1,0,150,50)"></path>

</svg>








svg fill svg.js







share|improve this question


















  • 3





    It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper"

    – enxaneta
    Nov 13 '18 at 19:22






  • 2





    @enxaneta you should make that an aswer

    – Fuzzyma
    Nov 17 '18 at 6:52
















1















I'm trying to fill the following path and while I expected it to be filled inside the stroke line I get the following shape (black fill):



enter image description here



I've tried changing fill-rule from nonzero to evenodd but with the exact same result, what should I do?






<svg id="svg-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events">

      <path d="M12.112500563968936 -80.49999994829511L12.042182152685129 -82.22343949593682L11.831473217997551 -83.94682609775359L11.514855642847493 -85.6247322359464L11.128207005438131 -87.30258542831425L10.670952607720444 -88.93490521123317L10.143626097882809 -90.52211515130273L9.545981176761362 -92.06410935687299L8.877771545192232 -93.60610356244325L8.139489801503156 -95.01186816044131L7.295545716515463 -96.37209934899047L6.838578667822286 -97.00702568167824L6.3463087389749475 -97.59678922569168L5.818982229137315 -98.14101936025617L5.256393889006159 -98.63971608537176L4.658748967884712 -99.00255382368974L3.9904982864549403 -99.3198581525588L2.689628202634715 -99.6826958908768L1.3537425876848381 -99.95483743107152L0.017528573849803664 -100.00000021974586L-1.3183980909607182 -99.95483743107152L-2.654571054935106 -99.6826958908768L-3.9907850687701405 -99.3198581525588L-4.623445521021239 -99.00255382368974L-5.221336741306553 -98.63971608537176L-5.783925081437705 -98.14101936025617L-6.31125159127534 -97.59678922569168L-6.803521520122677 -97.00702568167824L-7.2605296186764985 -96.37209934899047L-8.10443265380355 -95.01186816044131L-8.87805832750743 -93.60610356244325L-9.545980610052048 -92.06410935687299L-10.143625531173495 -90.52211515130273L-10.67123939003564 -88.93490521123317L-11.128206438728816 -87.30258542831425L-11.51485507613818 -85.6247322359464L-11.796169771134078 -83.94682609775359L-12.007166054846163 -82.22343949593682L-12.112499997259626 -80.49999994829511M-12.112499982336715 30.499999485030372C-12.04536024551652 33.631911350749505 -11.566121434420666 35.815474903680865 -10.542819238747384 37.48436543988575C-7.486224840924649 42.4741625233618 -4.332682978296873 46.72232422699756 -0.9603581801688108 49.61208665697819A3.139072091761344 9.151898708905092 0 0 0 0.0004346053615336132 49.998513282651516H0.0004346053615336132A3.139072091761344 9.151898708905092 0 0 0 0.961227390891878 49.61208665697819C4.332684002767934 46.721480500740626 7.485936469978384 42.4741625233618 10.542820263218431 37.48436543988575C11.5658330634744 35.814631177423934 12.04536126998758 33.631911350749505 12.112501006807776 30.499999485030372M-12.1125 27.5A-760.2727435307559 -760.2727435307559 0 0 0 -12.1125 -77.5M12.1125 27.5A760.2727435307559 760.2727435307559 0 0 1 12.1125 -77.5M-12.1125 -77.5C-12.165129099635367 -78.25 -12.112500190734863 -79.75 -12.112500190734863 -80.5M12.1125 -77.5C12.165129099635367 -78.25 12.112500190734863 -79.75 12.112500190734863 -80.5M-12.1125 27.5C-12.165129099635367 28.25 -12.112500190734863 29.75 -12.112500190734863 30.5M12.1125 27.5C12.165129099635367 28.25 12.11250114440918 29.75 12.11250114440918 30.5 " fill="blue" fill-rule="nonzero" stroke="red" transform="matrix(0,1,1,0,150,50)"></path>

</svg>








svg fill svg.js







share|improve this question


















  • 3





    It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper"

    – enxaneta
    Nov 13 '18 at 19:22






  • 2





    @enxaneta you should make that an aswer

    – Fuzzyma
    Nov 17 '18 at 6:52














1












1








1








I'm trying to fill the following path and while I expected it to be filled inside the stroke line I get the following shape (black fill):



enter image description here



I've tried changing fill-rule from nonzero to evenodd but with the exact same result, what should I do?






<svg id="svg-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events">

      <path d="M12.112500563968936 -80.49999994829511L12.042182152685129 -82.22343949593682L11.831473217997551 -83.94682609775359L11.514855642847493 -85.6247322359464L11.128207005438131 -87.30258542831425L10.670952607720444 -88.93490521123317L10.143626097882809 -90.52211515130273L9.545981176761362 -92.06410935687299L8.877771545192232 -93.60610356244325L8.139489801503156 -95.01186816044131L7.295545716515463 -96.37209934899047L6.838578667822286 -97.00702568167824L6.3463087389749475 -97.59678922569168L5.818982229137315 -98.14101936025617L5.256393889006159 -98.63971608537176L4.658748967884712 -99.00255382368974L3.9904982864549403 -99.3198581525588L2.689628202634715 -99.6826958908768L1.3537425876848381 -99.95483743107152L0.017528573849803664 -100.00000021974586L-1.3183980909607182 -99.95483743107152L-2.654571054935106 -99.6826958908768L-3.9907850687701405 -99.3198581525588L-4.623445521021239 -99.00255382368974L-5.221336741306553 -98.63971608537176L-5.783925081437705 -98.14101936025617L-6.31125159127534 -97.59678922569168L-6.803521520122677 -97.00702568167824L-7.2605296186764985 -96.37209934899047L-8.10443265380355 -95.01186816044131L-8.87805832750743 -93.60610356244325L-9.545980610052048 -92.06410935687299L-10.143625531173495 -90.52211515130273L-10.67123939003564 -88.93490521123317L-11.128206438728816 -87.30258542831425L-11.51485507613818 -85.6247322359464L-11.796169771134078 -83.94682609775359L-12.007166054846163 -82.22343949593682L-12.112499997259626 -80.49999994829511M-12.112499982336715 30.499999485030372C-12.04536024551652 33.631911350749505 -11.566121434420666 35.815474903680865 -10.542819238747384 37.48436543988575C-7.486224840924649 42.4741625233618 -4.332682978296873 46.72232422699756 -0.9603581801688108 49.61208665697819A3.139072091761344 9.151898708905092 0 0 0 0.0004346053615336132 49.998513282651516H0.0004346053615336132A3.139072091761344 9.151898708905092 0 0 0 0.961227390891878 49.61208665697819C4.332684002767934 46.721480500740626 7.485936469978384 42.4741625233618 10.542820263218431 37.48436543988575C11.5658330634744 35.814631177423934 12.04536126998758 33.631911350749505 12.112501006807776 30.499999485030372M-12.1125 27.5A-760.2727435307559 -760.2727435307559 0 0 0 -12.1125 -77.5M12.1125 27.5A760.2727435307559 760.2727435307559 0 0 1 12.1125 -77.5M-12.1125 -77.5C-12.165129099635367 -78.25 -12.112500190734863 -79.75 -12.112500190734863 -80.5M12.1125 -77.5C12.165129099635367 -78.25 12.112500190734863 -79.75 12.112500190734863 -80.5M-12.1125 27.5C-12.165129099635367 28.25 -12.112500190734863 29.75 -12.112500190734863 30.5M12.1125 27.5C12.165129099635367 28.25 12.11250114440918 29.75 12.11250114440918 30.5 " fill="blue" fill-rule="nonzero" stroke="red" transform="matrix(0,1,1,0,150,50)"></path>

</svg>








svg fill svg.js







share|improve this question














I'm trying to fill the following path and while I expected it to be filled inside the stroke line I get the following shape (black fill):



enter image description here



I've tried changing fill-rule from nonzero to evenodd but with the exact same result, what should I do?






<svg id="svg-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events">

      <path d="M12.112500563968936 -80.49999994829511L12.042182152685129 -82.22343949593682L11.831473217997551 -83.94682609775359L11.514855642847493 -85.6247322359464L11.128207005438131 -87.30258542831425L10.670952607720444 -88.93490521123317L10.143626097882809 -90.52211515130273L9.545981176761362 -92.06410935687299L8.877771545192232 -93.60610356244325L8.139489801503156 -95.01186816044131L7.295545716515463 -96.37209934899047L6.838578667822286 -97.00702568167824L6.3463087389749475 -97.59678922569168L5.818982229137315 -98.14101936025617L5.256393889006159 -98.63971608537176L4.658748967884712 -99.00255382368974L3.9904982864549403 -99.3198581525588L2.689628202634715 -99.6826958908768L1.3537425876848381 -99.95483743107152L0.017528573849803664 -100.00000021974586L-1.3183980909607182 -99.95483743107152L-2.654571054935106 -99.6826958908768L-3.9907850687701405 -99.3198581525588L-4.623445521021239 -99.00255382368974L-5.221336741306553 -98.63971608537176L-5.783925081437705 -98.14101936025617L-6.31125159127534 -97.59678922569168L-6.803521520122677 -97.00702568167824L-7.2605296186764985 -96.37209934899047L-8.10443265380355 -95.01186816044131L-8.87805832750743 -93.60610356244325L-9.545980610052048 -92.06410935687299L-10.143625531173495 -90.52211515130273L-10.67123939003564 -88.93490521123317L-11.128206438728816 -87.30258542831425L-11.51485507613818 -85.6247322359464L-11.796169771134078 -83.94682609775359L-12.007166054846163 -82.22343949593682L-12.112499997259626 -80.49999994829511M-12.112499982336715 30.499999485030372C-12.04536024551652 33.631911350749505 -11.566121434420666 35.815474903680865 -10.542819238747384 37.48436543988575C-7.486224840924649 42.4741625233618 -4.332682978296873 46.72232422699756 -0.9603581801688108 49.61208665697819A3.139072091761344 9.151898708905092 0 0 0 0.0004346053615336132 49.998513282651516H0.0004346053615336132A3.139072091761344 9.151898708905092 0 0 0 0.961227390891878 49.61208665697819C4.332684002767934 46.721480500740626 7.485936469978384 42.4741625233618 10.542820263218431 37.48436543988575C11.5658330634744 35.814631177423934 12.04536126998758 33.631911350749505 12.112501006807776 30.499999485030372M-12.1125 27.5A-760.2727435307559 -760.2727435307559 0 0 0 -12.1125 -77.5M12.1125 27.5A760.2727435307559 760.2727435307559 0 0 1 12.1125 -77.5M-12.1125 -77.5C-12.165129099635367 -78.25 -12.112500190734863 -79.75 -12.112500190734863 -80.5M12.1125 -77.5C12.165129099635367 -78.25 12.112500190734863 -79.75 12.112500190734863 -80.5M-12.1125 27.5C-12.165129099635367 28.25 -12.112500190734863 29.75 -12.112500190734863 30.5M12.1125 27.5C12.165129099635367 28.25 12.11250114440918 29.75 12.11250114440918 30.5 " fill="blue" fill-rule="nonzero" stroke="red" transform="matrix(0,1,1,0,150,50)"></path>

</svg>








<svg id="svg-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events">

      <path d="M12.112500563968936 -80.49999994829511L12.042182152685129 -82.22343949593682L11.831473217997551 -83.94682609775359L11.514855642847493 -85.6247322359464L11.128207005438131 -87.30258542831425L10.670952607720444 -88.93490521123317L10.143626097882809 -90.52211515130273L9.545981176761362 -92.06410935687299L8.877771545192232 -93.60610356244325L8.139489801503156 -95.01186816044131L7.295545716515463 -96.37209934899047L6.838578667822286 -97.00702568167824L6.3463087389749475 -97.59678922569168L5.818982229137315 -98.14101936025617L5.256393889006159 -98.63971608537176L4.658748967884712 -99.00255382368974L3.9904982864549403 -99.3198581525588L2.689628202634715 -99.6826958908768L1.3537425876848381 -99.95483743107152L0.017528573849803664 -100.00000021974586L-1.3183980909607182 -99.95483743107152L-2.654571054935106 -99.6826958908768L-3.9907850687701405 -99.3198581525588L-4.623445521021239 -99.00255382368974L-5.221336741306553 -98.63971608537176L-5.783925081437705 -98.14101936025617L-6.31125159127534 -97.59678922569168L-6.803521520122677 -97.00702568167824L-7.2605296186764985 -96.37209934899047L-8.10443265380355 -95.01186816044131L-8.87805832750743 -93.60610356244325L-9.545980610052048 -92.06410935687299L-10.143625531173495 -90.52211515130273L-10.67123939003564 -88.93490521123317L-11.128206438728816 -87.30258542831425L-11.51485507613818 -85.6247322359464L-11.796169771134078 -83.94682609775359L-12.007166054846163 -82.22343949593682L-12.112499997259626 -80.49999994829511M-12.112499982336715 30.499999485030372C-12.04536024551652 33.631911350749505 -11.566121434420666 35.815474903680865 -10.542819238747384 37.48436543988575C-7.486224840924649 42.4741625233618 -4.332682978296873 46.72232422699756 -0.9603581801688108 49.61208665697819A3.139072091761344 9.151898708905092 0 0 0 0.0004346053615336132 49.998513282651516H0.0004346053615336132A3.139072091761344 9.151898708905092 0 0 0 0.961227390891878 49.61208665697819C4.332684002767934 46.721480500740626 7.485936469978384 42.4741625233618 10.542820263218431 37.48436543988575C11.5658330634744 35.814631177423934 12.04536126998758 33.631911350749505 12.112501006807776 30.499999485030372M-12.1125 27.5A-760.2727435307559 -760.2727435307559 0 0 0 -12.1125 -77.5M12.1125 27.5A760.2727435307559 760.2727435307559 0 0 1 12.1125 -77.5M-12.1125 -77.5C-12.165129099635367 -78.25 -12.112500190734863 -79.75 -12.112500190734863 -80.5M12.1125 -77.5C12.165129099635367 -78.25 12.112500190734863 -79.75 12.112500190734863 -80.5M-12.1125 27.5C-12.165129099635367 28.25 -12.112500190734863 29.75 -12.112500190734863 30.5M12.1125 27.5C12.165129099635367 28.25 12.11250114440918 29.75 12.11250114440918 30.5 " fill="blue" fill-rule="nonzero" stroke="red" transform="matrix(0,1,1,0,150,50)"></path>

</svg>





<svg id="svg-container" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:ev="http://www.w3.org/2001/xml-events">

      <path d="M12.112500563968936 -80.49999994829511L12.042182152685129 -82.22343949593682L11.831473217997551 -83.94682609775359L11.514855642847493 -85.6247322359464L11.128207005438131 -87.30258542831425L10.670952607720444 -88.93490521123317L10.143626097882809 -90.52211515130273L9.545981176761362 -92.06410935687299L8.877771545192232 -93.60610356244325L8.139489801503156 -95.01186816044131L7.295545716515463 -96.37209934899047L6.838578667822286 -97.00702568167824L6.3463087389749475 -97.59678922569168L5.818982229137315 -98.14101936025617L5.256393889006159 -98.63971608537176L4.658748967884712 -99.00255382368974L3.9904982864549403 -99.3198581525588L2.689628202634715 -99.6826958908768L1.3537425876848381 -99.95483743107152L0.017528573849803664 -100.00000021974586L-1.3183980909607182 -99.95483743107152L-2.654571054935106 -99.6826958908768L-3.9907850687701405 -99.3198581525588L-4.623445521021239 -99.00255382368974L-5.221336741306553 -98.63971608537176L-5.783925081437705 -98.14101936025617L-6.31125159127534 -97.59678922569168L-6.803521520122677 -97.00702568167824L-7.2605296186764985 -96.37209934899047L-8.10443265380355 -95.01186816044131L-8.87805832750743 -93.60610356244325L-9.545980610052048 -92.06410935687299L-10.143625531173495 -90.52211515130273L-10.67123939003564 -88.93490521123317L-11.128206438728816 -87.30258542831425L-11.51485507613818 -85.6247322359464L-11.796169771134078 -83.94682609775359L-12.007166054846163 -82.22343949593682L-12.112499997259626 -80.49999994829511M-12.112499982336715 30.499999485030372C-12.04536024551652 33.631911350749505 -11.566121434420666 35.815474903680865 -10.542819238747384 37.48436543988575C-7.486224840924649 42.4741625233618 -4.332682978296873 46.72232422699756 -0.9603581801688108 49.61208665697819A3.139072091761344 9.151898708905092 0 0 0 0.0004346053615336132 49.998513282651516H0.0004346053615336132A3.139072091761344 9.151898708905092 0 0 0 0.961227390891878 49.61208665697819C4.332684002767934 46.721480500740626 7.485936469978384 42.4741625233618 10.542820263218431 37.48436543988575C11.5658330634744 35.814631177423934 12.04536126998758 33.631911350749505 12.112501006807776 30.499999485030372M-12.1125 27.5A-760.2727435307559 -760.2727435307559 0 0 0 -12.1125 -77.5M12.1125 27.5A760.2727435307559 760.2727435307559 0 0 1 12.1125 -77.5M-12.1125 -77.5C-12.165129099635367 -78.25 -12.112500190734863 -79.75 -12.112500190734863 -80.5M12.1125 -77.5C12.165129099635367 -78.25 12.112500190734863 -79.75 12.112500190734863 -80.5M-12.1125 27.5C-12.165129099635367 28.25 -12.112500190734863 29.75 -12.112500190734863 30.5M12.1125 27.5C12.165129099635367 28.25 12.11250114440918 29.75 12.11250114440918 30.5 " fill="blue" fill-rule="nonzero" stroke="red" transform="matrix(0,1,1,0,150,50)"></path>

</svg>





svg fill svg.js




svg fill svg.js






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 13 '18 at 18:41









Joaquín L. RoblesJoaquín L. Robles

3,45874877




3,45874877








  • 3





    It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper"

    – enxaneta
    Nov 13 '18 at 19:22






  • 2





    @enxaneta you should make that an aswer

    – Fuzzyma
    Nov 17 '18 at 6:52














  • 3





    It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper"

    – enxaneta
    Nov 13 '18 at 19:22






  • 2





    @enxaneta you should make that an aswer

    – Fuzzyma
    Nov 17 '18 at 6:52








3




3





It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper"

– enxaneta
Nov 13 '18 at 19:22





It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper"

– enxaneta
Nov 13 '18 at 19:22




2




2





@enxaneta you should make that an aswer

– Fuzzyma
Nov 17 '18 at 6:52





@enxaneta you should make that an aswer

– Fuzzyma
Nov 17 '18 at 6:52












1 Answer
1






active

oldest

votes


















1














As @Fuzzyma advised me, I'm making my comment an answer:



It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper".






share|improve this answer



















  • 1





    As you suggested, changing the way I draw my path did the trick

    – Joaquín L. Robles
    Nov 18 '18 at 13:31











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287569%2fsvg-fill-inside-path-with-no-intersections%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














As @Fuzzyma advised me, I'm making my comment an answer:



It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper".






share|improve this answer



















  • 1





    As you suggested, changing the way I draw my path did the trick

    – Joaquín L. Robles
    Nov 18 '18 at 13:31
















1














As @Fuzzyma advised me, I'm making my comment an answer:



It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper".






share|improve this answer



















  • 1





    As you suggested, changing the way I draw my path did the trick

    – Joaquín L. Robles
    Nov 18 '18 at 13:31














1












1








1







As @Fuzzyma advised me, I'm making my comment an answer:



It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper".






share|improve this answer













As @Fuzzyma advised me, I'm making my comment an answer:



It's the way you are drawing your path. Every time you are using the M command you are moving to a different point and you are breaking the path. It's as if you would lift the pencil from the paper and begin to draw from an other point. You have to draw the path "without lifting your pencil from the paper".







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 17 '18 at 7:56









enxanetaenxaneta

7,5392518




7,5392518








  • 1





    As you suggested, changing the way I draw my path did the trick

    – Joaquín L. Robles
    Nov 18 '18 at 13:31














  • 1





    As you suggested, changing the way I draw my path did the trick

    – Joaquín L. Robles
    Nov 18 '18 at 13:31








1




1





As you suggested, changing the way I draw my path did the trick

– Joaquín L. Robles
Nov 18 '18 at 13:31





As you suggested, changing the way I draw my path did the trick

– Joaquín L. Robles
Nov 18 '18 at 13:31


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287569%2fsvg-fill-inside-path-with-no-intersections%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Full-time equivalent

Image
Full-time equivalent From Wikipedia, the free encyclopedia Jump to navigation Jump to search Full-time equivalent ( FTE ) or whole time equivalent ( WTE ) is a unit that indicates the workload of an employed person (or student) in a way that makes workloads or class loads comparable [1] across various contexts. FTE is often used to measure a worker's or student's involvement in a project, or to track cost reductions in an organization. An FTE of 1.0 is equivalent to a full-time worker or student, while an FTE of 0.5 signals half of a full work or school load. [2] Contents 1 U.S. Federal Government 2 In education 2.1 Example 3 Notes 4 References U.S. Federal Government [ edit ] In the U.S. Federal Government, FTE is defined by the Government Accountability Office (GAO) as the number of total hours worked divided by the maximum number of compensable hours in a full-time schedule as...
Read more

さくらももこ

Image
さくら ももこ 本名 非公開 [1] 生誕 ( 1965-05-08 ) 1965年5月8日 日本・静岡県清水市 （現・静岡市清水区） 死没 ( 2018-08-15 ) 2018年8月15日（53歳没） 日本・東京都目黒区 国籍 日本 職業 漫画家 エッセイスト 作詞家 活動期間 1984年 - 2018年 ジャンル 少女漫画 青年漫画 児童漫画 代表作 『ちびまる子ちゃん』 『コジコジ』 受賞 1989年：第13回講談社漫画賞少女部門 （『ちびまる子ちゃん』） 1990年：第32回日本レコード大賞 （『おどるポンポコリン』作詞） 公式サイト さくらプロダクション テンプレートを表示 さくら ももこ （1965年5月8日 - 2018年8月15日 [2] ）は、日本の漫画家、エッセイスト、作詞家、脚本家。また、自身の少女時代をモデルとした代表作のコミック『ちびまる子ちゃん』の主人公の名前でもある。静岡県清水市（現・静岡市清水区）出身。血液型はA型。身長159cm。一男の母親。 代表作のコミック『ちびまる子ちゃん』の単行本の売上は累計3000万部を超える。また、エッセイストとしても独特の視点と語り口で人気が高く、初期エッセイ集三部作『もものかんづめ』『さるのこしかけ』『たいのおかしら』はいずれもミリオンセラーを記録。 目次 1 経歴 2 人物・交遊関係 3 主な作品 3.1 漫画 3.2 エッセイ 3.3 作詞 3.4 詩集 3.5 雑誌・ムック本 3.6 翻訳 3.7 絵本、ドラマ脚本他 3.8 ラジオ出演 3.9 その他 4 関係人物 4.1 アシスタント 4.2 さくらももこを演じた人物 5 脚注 5.1 注釈 5.2 出典 6 外部リンク 経歴 年譜形式の経歴は推奨されていません 。人物の伝記は流れのあるまとまった文章で記述し、年譜は補助的な使用にとどめてください。 （ 2018年8月 ） 清水市立（当時）入江小学校...
Read more

13 indicted, 8 arrested in Calif. drug cartel investigation

Image
Fox News U.S. World Opinion Politics Entertainment Business Lifestyle TV Radio More Expand / Collapse search Login Watch TV ☰ Hot Topics U.S. Crime Military Education Terror Immigration Economy Personal Freedoms World U.N. Conflicts Terrorism Disasters Global Economy Environment Religion Scandals Opinion Politics Executive Senate House Judiciary Foreign policy Polls Elections Entertainment Celebrity News Movies TV News Music News Style News Entertainment Video Business Markets Politics Technology Features Business Leaders Lifestyle Food + Drink Cars + Trucks Travel + Outdoors House + Home Fitness + Well-being Style + Beauty Family Science Archaeology Air & Space Planet Earth Wild Nature Natural Science Dinosaurs Tech Security Innovation Drones Computers Video Games Military Tech Health Healthy Living Medical Research Mental Health Cancer Heart Health Children'...
Read more