chester40
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by chester40
-
-
4 часа назад, AlexZaw сказал:
как решить проблему я не знаю, но возможно вы этого не видели -
поддержка clip-path
Global 1.48%+86.92%=88.4%
unprefixed: 1.48%+57.2%=58.69%
Спасибо за информацию, не знал о таком.
4 часа назад, Igor Schnaider сказал:В общем, методом тыка пришел к тому, что нужно дублировать свойство в атрибуте style. ¯\_(ツ)_/¯
https://codepen.io/anon/pen/RgJyrBНовый Firefox уже поддерживает clip-path: polygon, для старых нужен fallback на SVG. IE и Edge вообще никак.
У меня заработало в старом Firefox, но всё еще не работает в Хроме и Опере.
В связи со всем вышеизложенным не стал дальше извращаться и решил вопрос с помощью gif анимации ) Так надёжнее )Всем спасибо за помощь!
-
16 часов назад, Igor Schnaider сказал:
Попробуйте с objectBoundingBox:
<svg> <defs> <clipPath id="WavesPolygon" clipPathUnits="objectBoundingBox"> <polygon points="0 0, .95 0, .95 .08, .8 .05, .6 .1, .4 .15, .2 .2"></polygon> </clipPath> </defs> </svg>
К сожалению не помогло. Еще выяснилось что в Firefox 50 тоже не работает.
-
Здравствуйте. Прошу помочь в решении следующей задачи:
Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией:
Для примера:HTML
<div id="logoimage-waves"> <div id="waves-animated"></div> </div> <svg> <clipPath id="WavesPolygon"> <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20"> </polygon> </clipPath> </svg>
CSS
#logoimage-waves { width: 100px; height: 100px; clip-path: url("#WavesPolygon"); -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px); position: absolute; } #waves-animated { width: 100px; height: 100px; position: absolute; background: url(/images/waves.png) no-repeat; animation: waves-animation 40s; } @keyframes waves-animation { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
Вопрос следующий:
В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере.В общем задачка та еще. Второй день пытаюсь решить )
Благодарю за внимание!
Не работает обрезка clip-path для анимированного элемента с transform в Chrome и Opera
in HTML Coding
Posted
Да уж, думаю рано пока еще clip-path использовать, если кроссбраузерность хорошая нужна ) А то в каком-нибудь браузере косяк да вылезет)