Почему я не могу заполнить определенные области внутри path независимо от типа заливки?
Я нарисовал зубчатое колесо, и я не могу заполнить область, которую хочу заполнить. Вы можете посмотреть здесь:
https://jsfiddle.net/9k451fb6/
Я хочу, чтобы часть была заполнена за пределами «отверстия» в центре, до зубцов, тогда как «отверстие» заполнялось вместе с частями краев зубцов (что само по себе любопытно для меня, так как путь один полный путь с одним закрытием (z) в конце, так почему же кажется, что каждая секция шестеренки закрыта?)
Я пробовал варианты заполнения, fill-rule=nonzero и evenodd, но ничего не изменилось.
Ниже код, который я использую. Обратите внимание, что он нарисован одним path. Однако я пробовал и этот метод, и закрытие контура (вставка z) непосредственно перед рисованием круга в середине («дыра»):
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15 M 211 15 A 30 30 0 0 0 259 50 L 278 77 M 278 77 A 30 30 0 0 0 296 133 L 296 166 M 296 166 A 30 30 0 0 0 278 222 L 259 249 M 259 249 A 30 30 0 0 0 211 284 L 179 294 M 179 294 A 30 30 0 0 0 120 294 L 88 284 M 88 284 A 30 30 0 0 0 40 249 L 21 222 M 21 222 A 30 30 0 0 0 3 166 L 3 133 M 3 133 A 30 30 0 0 0 21 77 L 40 50 M 40 50 A 30 30 0 0 0 88 15 L 120 5 M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>Свободный перевод вопроса Why am I unable to fill certain areas within a path, regardless of fill-rule? от участника @Allasso.
Ответы (2 шт):
Я думаю, это то, чего вы хотите добиться:
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" stroke="#ff0000" stroke-width="2" fill="blue" fill-rule="evenodd" d="M 120 5 A 30 30 0 0 0 179 5 L 211 15
A 30 30 0 0 0 259 50 L 278 77
A 30 30 0 0 0 296 133 L 296 166
A 30 30 0 0 0 278 222 L 259 249
A 30 30 0 0 0 211 284 L 179 294
A 30 30 0 0 0 120 294 L 88 284
A 30 30 0 0 0 40 249 L 21 222
A 30 30 0 0 0 3 166 L 3 133
A 30 30 0 0 0 21 77 L 40 50
A 30 30 0 0 0 88 15 L 120 5
M 150 200 A 50 50 0 1 0 149 200 z"></path>
</svg>Я удалил команды M между зубцами шестеренки. Переходя к новой точке для каждого зуба, вы заставляли заполнять этот фрагмент.
В любом случае, на вопрос уже был дан ответ, я оставлю здесь свой подход.
Проблема с вашим svg заключалась в том, что каждый угол зубца зубчатого колеса начинал новый вспомогательный путь, узлы которого находились в том же положении следующих зубьев, но не были связаны друг с другом.
Я просто открыл файл в Inkscape, выделил все узлы и присоединился с помощью соответствующего инструмента.
Примечание на будущее: каждый раз, когда вы видите подобное поведение, в основном с svgs, экспортированным Illustrator, CorellDraw и некоторыми онлайн-редакторами, вы можете быть уверены, что где-то на пути есть перекрывающиеся узлы, но не связанные.
Обратите внимание на разницу между двумя углами. Тот, что расположен над двумя узлами, не подключен.
Итак, на самом деле вы получили серию подпутей, залитых синим цветом, как показано стрелкой.
И это код в том виде, в каком SVGO очистил его после того, как Inkscape сохранил его.
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path id="arc_path" d="M 264.07142,186.6301 C 259.69918,200.23262 265.52681,215.03117 278,222 l -19,27 C 248.58911,238.28353 231.87939,236.86124 219.80706,245.66397 207.73474,254.46671 203.97989,270.81109 211,284 l -32,10 c -2.6299,-14.22385 -15.03507,-24.54564 -29.5,-24.54564 -14.46493,0 -26.8701,10.32179 -29.5,24.54564 L 88,284 C 95.020113,270.81109 91.265258,254.46671 79.192936,245.66397 67.120613,236.86124 50.410887,238.28353 40,249 L 21,222 C 33.47319,215.03117 39.300816,200.23262 34.928577,186.6301 30.556338,173.02758 17.197624,164.39607 3,166 l 0,-33 c 14.197624,1.60393 27.556338,-7.02758 31.928577,-20.6301 C 39.300816,98.767378 33.47319,83.968835 21,77 L 40,50 C 50.410887,60.716466 67.120613,62.138761 79.192936,53.336026 91.265258,44.533291 95.020113,28.188906 88,15 L 120,5 c 2.6299,14.223853 15.03507,24.545641 29.5,24.545641 14.46493,0 26.8701,-10.321788 29.5,-24.545641 l 32,10 c -7.02011,13.188906 -3.26526,29.533291 8.80706,38.336026 C 231.87939,62.138761 248.58911,60.716466 259,50 l 19,27 C 265.52681,83.968835 259.69918,98.767378 264.07142,112.3699 268.44366,125.97242 281.80238,134.60393 296,133 l 0,33 c -14.19762,-1.60393 -27.55634,7.02758 -31.92858,20.6301 z M 150,200 c 27.51544,-0.27517 49.63706,-22.73389 49.4979,-50.23579 -0.13917,-27.5005 -22.48529,-49.69493 -49.9979,-49.69493 -27.51261,0 -49.858733,22.19443 -49.997895,49.69493 C 99.362936,177.26611 121.48456,199.72483 149,200 Z" style="fill:#0000ff;fill-rule:evenodd;stroke:#ff0000;stroke-width:2"/>
</svg>Свободный перевод ответа от участника @SIMBIOSIS.