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

Question

Так как в моем названии говорится, что я хочу «вырезать отверстие» в прямоугольном элементе.

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Это изображение объяснить, как вырезать отверстие: «Где я буду неправильно здесь»