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

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

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

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

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

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

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

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

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

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

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

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

Пентаграмма и два круга, заполненные красным, с разрезами центров, показывающими белый фон

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

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

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

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

введите описание изображения здесь

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

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

  • Selenium WebDriver : как нажимать на элементы в SVG с помощью XPath
  • вертикальное выравнивание текстового элемента в SVG
  • Вставить SVG в SVG?
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • Быстрые и гибкие интерактивные диаграммы / графики: SVG, Canvas, другое?
  • Как использовать маркеры SVG в API Карт Google v3
  • Преобразование анимированных SVG в фильм
  • Как сделать элемент разворачиваться или сжиматься до его родительского контейнера?
  • Мета-элемент IE11 Перерывы SVG
  • Как преобразовать / сохранить график d3.js в pdf / jpeg
  • Преобразование из EPS в формат SVG
  • Interesting Posts
    Давайте будем гением компьютера.