Как разрезать отверстие в прямоугольнике 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, например.

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

  • Двойная изогнутая форма
  • Инвертировать округленный угол в CSS?
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • Как использовать маркеры SVG в API Карт Google v3
  • Повернуть текст оси x в d3
  • Как я могу конвертировать SVG-файлы, содержащие текст в файлы PDF (в частности, CentOS 5.3 x86_64)?
  • Элемент SVG USE и стиль наведения
  • Преобразование SVG в PDF
  • Как сделать элемент разворачиваться или сжиматься до его родительского контейнера?
  • вертикальное выравнивание текстового элемента в SVG
  • Угловые и SVG-фильтры
  • Interesting Posts

    Каков наилучший способ сделать подстроку в пакетном файле?

    «Коллекция была мутирована при перечислении» в executeFetchRequest

    Введите результат с условным оператором в C #

    Каков наиболее эффективный способ удаления дубликатов и сортировки вектора?

    Могу ли я навалом перемещать несколько встреч / встреч по перспективам из одной папки в другую?

    Как заставить Windows повторно подключать USB-устройство, не подключая его снова?

    Дважды нажатие кнопки Jquery вызывает щелчок по ярлыку html.

    Возвращаемый объект Mat из собственного кода в java в OpenCV

    Угловые ng-repeat условные элементы обертывания в элементе (элементы группы в ng-repeat)

    Почему AngularJS включает в себя пустую опцию?

    finalize (), вызванный для объекта с высокой степенью достижимости в Java 8

    Vista Networking не работает … Не могу даже ping localhost

    Android: удалить уведомление из панели уведомлений

    Разрешены ли параллельные вызовы send / recv в одном и том же сокете?

    Преобразование многих утверждений «если еще» в более чистый подход

    Давайте будем гением компьютера.