Как вырезать отверстие в прямоугольнике SVG

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

У меня есть два прямоугольных элемента, один поверх другого. На нижней стороне есть цвет заливки белого цвета, а один сверху имеет цвет заливки серого.

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

Этот элемент svg будет использоваться в качестве звуковой кнопки для медиаплеера на странице. Другими словами, вы сможете щелкнуть мышью влево/вправо (или перетащить), а изменение уровня звука будет представлено изменением ширины элемента rect внизу, которое отображается через вырезанный треугольник верхнего прямоугольного элемента.

Надеюсь, что это не слишком смущает.: P

Вот быстрый макет того, как он должен выглядеть: http://forboden.com/coding/s1.png

Вот мой код: http://forboden.com/coding/svgClipTest.html

Где я здесь не так?

Ответы

Ответ 1

Самый простой способ - использовать <path> с отверстием и установить указатели-события на none, чтобы события могли перейти к <rect> под. Конечно, есть много других способов обработки таких событий, как обертывание их с помощью <g> и обработка событий на нем.

Вам не нужно ограничивать себя основными формами и использовать сложную обрезку. Сделайте что-то достаточно, чтобы скопировать и вставить данные пути, созданные с помощью таких инструментов, как inkscape.

Ответ 2

Вы можете использовать свойство fill-rule: evenodd (по умолчанию) для достижения этого эффекта, если вы хотите предотвратить заполнение прямоугольник от рисунка, где находится круг. См. этот пример из спецификации SVG:

Ключевым моментом является вытяжка наружной формы и внутренних форм (отверстий) в другом направлении (по часовой стрелке против против часовой стрелки).

Нарисуйте внешнюю форму по часовой стрелке и нарисуйте внутренние (отверстия) фигуры против часовой стрелки.
Или наоборот, нарисуйте внешнюю форму (отверстия) против часовой стрелки и нарисуйте внутренние фигуры по часовой стрелке.
Конкатентные данные о внешней форме и внутренних формах (отверстиях).

Вы можете вырезать больше отверстий, конкатентно больше данных о канале отверстия.

Это изображение объясняет, как вырезать отверстие:

Ответ 3

Я вижу, что вы уже решили, просто захотелось добавить, что если вы хотите что-то более продвинутое, то часто довольно просто использовать <mask>, см. http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg, например.

Однако, если вы можете избежать маскировки и обрезки (например, просто нарисовать объекты сверху), что обычно приводит к лучшей производительности/пользовательскому опыту.