我正在尝试填充以下路径,并且我希望将其填充到笔划线内,但我得到以下形状(黑色填充):
我尝试将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>
答案 0 :(得分:1)
按照@Fuzzyma的建议,我正在将我的评论作为答案:
这就是您绘制路径的方式。每次使用M
命令时,您都将移动到另一个位置,并且正在走这条路。就像您将铅笔从纸上抬起并从另一点开始绘制一样。您必须绘制路径“不要从纸上抬起铅笔”。