Как применить SVG clipPath к элементу HTML, который не находится в верхнем левом углу документа в браузерах webkit

Я определил clipPath SVG и применяю его к нескольким DIV на моей странице. Он работает/отображается, как и ожидалось, в FF, но в Chrome и Safari (все последние версии) кажется, что clipPath повлияет на элемент HTML, только если элемент HTML расположен в верхнем левом углу страницы.

Объект SVG

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003
        c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79
        C23.312,3.672,26.527,1.098,30,0.01H0z"/>
        </clipPath>
    </defs>
</svg>

CSS для обрезаемого элемента

.clipMe {
    background: red;
    width: 30px;
    height: 21px;
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
}

JSFIDDLE

Я считаю, что эта статья начинает решать эту проблему с помощью систем координат, но я заблудился /перепутал очень быстро несколько раз. Звучит так, как будто говорится, что, используя разные единицы измерения и координаты, можно применить clipPath к любому элементу HTML... но я действительно не уверен.

Я экспортировал свой clipPath из Illustrator, поэтому, если бы нужно было использовать разные единицы измерения/координаты, я не уверен, как бы я это сделал.

В Chrome и/или Safari кто-нибудь успешно применил clipPath SVG (это был фактический путь, а не многоугольник или эллипс) к элементу HTML, расположенному где-то еще, кроме верхнего левого угла страницы?


svg css clip-path
person Daveh0    schedule 26.04.2015    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я думаю, что Ответы PaulOB на SitePoint довольно хорошо обобщают эту проблему. Короче говоря: поддержка применения SVG clipPath к элементу HTML еще не совсем доступна для браузеров webkit.

person Daveh0    schedule 27.04.2015

arrow_upward
0
arrow_downward

пока я искал ответ на этот вопрос, я наткнулся на ваш вопрос. Я обнаружил, что все ответы, включая ответ «вы просто не можете», были немного отговоркой.

Я продолжал пробовать, и вот что я нашел:

Когда у вас есть svg clipPath, насколько я могу судить, он не может быть позиционирован, НО, если вы примете во внимание, что вы можете бросить его в iframe, а затем расположить iframe, вы золотой.

Я включаю ссылку, и я не уверен, как долго она будет на месте, прежде чем она «взорвется», потому что я не владелец сервера.

пример

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

person David Johnson    schedule 08.05.2015

arrow_upward
0
arrow_downward

Проблема в Chrome и Opera только что была исправлена ​​и появится в ближайшие несколько недель. Браузер действительно всегда применял эталонный клип в начале страницы. Новое поведение должно соответствовать Firefox.

person user3058245    schedule 23.06.2016