Маскировка в SVG?

Question

Как лучше всего нарисовать круг с вырезанным из него срезом в svg? Это будет использоваться для наложения поверх другого цветного круга как своего рода маскирующий эффект.

Answer 1

    <svg version="1.1" viewBox="0 0 100 100">
        <defs>
            <mask id="mask" x="0" y="0" width="100" height="100" maskUnits="userSpaceOnUse">
                <circle cx="50" cy="50" r="50" fill="white"/>
                <circle cx="50" cy="50" r="25" fill="black"/>
            </mask>
        </defs>
        <circle cx="50" cy="50" r="50" fill="blue" mask="url(#mask)"/>
    </svg>

Внутри элемента маски у вас есть два круга. Первый - это большой круг, из которого вы хотите вырезать. Обратите внимание, заливка белая. Это означает, что форма будет заполнена.

Следующий круг меньше и будет вырезан из первого круга. Обратите внимание, что заливка черная. Это означает, что эта форма не будет заполнена и вместо этого останется прозрачной.

Теперь эти круги просто определяют маску для использования, нам все еще нужно нарисовать фигуру, чтобы использовать маску. Это последний круг за пределами маски и элемента defs.

В конце вы должны получить синий круг с круглым отверстием, вырезанным из центра.

Answer 2

Вероятно, вам лучше всего использовать путь (любезно предоставленный Inkscape):

<path fill="red" d="m 134.73897,236.38837 a 100,92.85714 0 1 1 44.86201,86.57396 l 54.68474,-77.743 z">