SVG заполнить внутри пути без пересечений - PullRequest
Новая
       42

SVG заполнить внутри пути без пересечений

0 голосов
/ 13 ноября 2018

Я пытаюсь заполнить следующий путь, и хотя я ожидал, что он будет заполнен внутри линии обводки, я получаю следующую форму (черная заливка):

enter image description here

Я пытался изменить fill-rule с nonzero на evenodd, но с тем же результатом, что мне делать? 

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

1 Ответ

0 голосов
/ 17 ноября 2018

Поскольку @Fuzzyma советовал мне, я делаю свой комментарий ответом:

Это способ, которым вы рисуете свой путь. Каждый раз, когда вы используете команду M, вы перемещаетесь в другую точку и нарушаете путь. Это как если бы вы подняли карандаш с бумаги и начали рисовать с другой точки. Вы должны нарисовать путь «не отрывая карандаш от бумаги».

...