У меня есть небольшая проблема с веб-страницей, которую я разрабатываю.Маска Webkit с SVG
Я использую файл .SVG для маскировки части изображения.
Он работает должным образом на Firefox, Safari, но работает только на Chrome под OS X.
Я хотел бы понять, почему? Есть идеи ?
Вот пример страницы, где я получил ту же проблему: http://girliemac.com/sandbox/mask.html
Спасибо заранее,
Jk_
Попробуйте поэкспериментировать с различными значениями как это:
-webkit-mask-box-image: url(svg/twitter-bird-new.svg) 100 100 0 0 round round;
Кажется как будто это имеет какое-то отношение к масштабированию. Зачем? Потому что он все еще находится на экспериментальной стадии.
Источник: https://developer.mozilla.org/en/CSS/-webkit-mask-box-image
Спасибо за это! Это все еще экспериментально. Но я пытаюсь найти лучшее решение для маскировки изображения. Когда я использую border-radius, я получаю ошибку с Chrome, поэтому я думаю о SVG. Я попытаюсь с помощью маскировки холста. Приветствия. –
Это выглядит хорошо, но если вы jQuerify в Chrome и сделать хит тест:
$(".avatar").on("click", function(){ console.log("works!");});
Вы можете нажать на остальную часть коробки ... в любом случае для меня, чтобы сделать что-то вроде этого и быть в состоянии нажать UNDERNEATH? Я пытаюсь создать круг в маске ... но я не хочу нажимать на круг сверху ... Я хочу щелкнуть вещи внизу. Например, если у вас есть копейка на четверть, а вы может видеть край более крупной монеты, такой как лоток ...
Любая идея, почему вы можете закрепить SVG-файл, но не встроенный SVG? Предположим, вы использовали вместо этого 'url (# twitter-bird)'. Любой способ для этого работать? – bozdoz