Forum PHP.pl > [CSS]clip-path

Pomoc - Szukaj - Użytkownicy - Kalendarz

kamilo818

20.06.2015, 13:37:26

Cześć.
Mam problem z działeniem clip-path w firefoxie i IE.
W chrome działa ok.

kod:

[PHP] pobierz, plaintext 
<section id="decor1" class="decor"></section>
 
<svg>
    <defs>
        <clippath id="absolute_path" clipPathUnits="objectBoundingBox">
            <polygon points="0 0, 2% 8%, 4% 0%, 6% 8%, 8% 0%, 10% 8%, 12% 0%, 14% 8%, 16% 0%, 18% 8%, 20% 0%, 22% 8%, 24% 0%, 26% 8%, 28% 0%, 30% 8%, 32% 0%,34% 8%, 36% 0%,38% 8%, 40% 0%,42% 8%, 44% 0%,46% 8%, 48% 0%,50% 8%, 52% 0%,54% 8%, 56% 0%,58% 8%, 60% 0%,62% 8%, 64% 0%,66% 8%, 68% 0%,70% 8%, 72% 0%,74% 8%, 76% 0%,78% 8%, 80% 0%,82% 8%, 84% 0%,86% 8%, 88% 0%,90% 8%, 92% 0%,94% 8%, 96% 0%,98% 8%, 100% 0%, 100% 100%, 98% 92%, 96% 100%, 94% 92%, 92% 100%, 90% 92%, 88% 100%, 86% 92%, 84% 100%, 82% 92%, 80% 100%, 78% 92%, 76% 100%, 74% 92%, 72% 100%, 70% 92%, 68% 100%, 66% 92%, 64% 100%, 62% 92%, 60% 100%, 58% 92%, 56% 100%, 54% 92%, 52% 100%, 50% 92%, 48% 100%, 46% 92%, 44% 100%, 42% 92%, 40% 100%, 38% 92%, 36% 100%, 34% 92%, 32% 100%, 30% 92%, 28% 100%, 26% 92%, 24% 100%, 22% 92%, 20% 100%, 18% 92%, 16% 100%, 14% 92%, 12% 100%, 10% 92%, 8% 100%, 6% 92%, 4% 100%, 2% 92%, 0% 100%"></polygon>
        </clippath>
    </defs>
</svg>
[PHP] pobierz, plaintext

css:

[PHP] pobierz, plaintext 
section.decor{
    width:100%;
    height:200px;
    background-attachment: fixed;
    position: relative;
    -webkit-clip-path: polygon(0% 0%, 2% 8%, 4% 0%, 6% 8%, 8% 0%, 10% 8%, 12% 0%, 14% 8%, 16% 0%, 18% 8%, 20% 0%, 22% 8%, 24% 0%, 26% 8%, 28% 0%, 30% 8%, 32% 0%,34% 8%, 36% 0%,38% 8%, 40% 0%,42% 8%, 44% 0%,46% 8%, 48% 0%,50% 8%, 52% 0%,54% 8%, 56% 0%,58% 8%, 60% 0%,62% 8%, 64% 0%,66% 8%, 68% 0%,70% 8%, 72% 0%,74% 8%, 76% 0%,78% 8%, 80% 0%,82% 8%, 84% 0%,86% 8%, 88% 0%,90% 8%, 92% 0%,94% 8%, 96% 0%,98% 8%, 100% 0%, 100% 100%, 98% 92%, 96% 100%, 94% 92%, 92% 100%, 90% 92%, 88% 100%, 86% 92%, 84% 100%, 82% 92%, 80% 100%, 78% 92%, 76% 100%, 74% 92%, 72% 100%, 70% 92%, 68% 100%, 66% 92%, 64% 100%, 62% 92%, 60% 100%, 58% 92%, 56% 100%, 54% 92%, 52% 100%, 50% 92%, 48% 100%, 46% 92%, 44% 100%, 42% 92%, 40% 100%, 38% 92%, 36% 100%, 34% 92%, 32% 100%, 30% 92%, 28% 100%, 26% 92%, 24% 100%, 22% 92%, 20% 100%, 18% 92%, 16% 100%, 14% 92%, 12% 100%, 10% 92%, 8% 100%, 6% 92%, 4% 100%, 2% 92%, 0% 100%);
    -moz-clip-path: url(#absolute_path);
    -o-clip-path: url(#absolute_path);
    clip-path: url(#absolute_path);
}
section#decor1{
    background-image: url(kostka_decor.jpg);
}
[PHP] pobierz, plaintext

Wdzięczny będę za pomoc.

Comandeer

20.06.2015, 13:49:32

AFAIR SVG nie potrafi w procenty przy elemencie clippath i trzeba było podawać w pikselach.
Dodatkowo jak teraz czytam:

Cytat("http://sarasoueidan.com/blog/css-svg-clipping/")

One important thing to note here is that when you use the objectBoundingBox value, the coordinates specified for the contents of the <clipPath> must be in the range [0, 1]—the coordinate system becomes a unit system, and the coordinates of the shapes inside a clipPath have to be fractions in that range.

Od razu uprzedzę, że to wynika z obserwacji poczynionych na szybko, nie natomiast z codziennego użytkowania

kamilo818

20.06.2015, 14:59:23

Zmienilem na :

[PHP] pobierz, plaintext 
<svg>
    <defs>
        <clippath id="absolute_path" clipPathUnits="objectBoundingBox">
            <polygon points="0 0, .02 .08, .04 0, .06 .08, .08 0, .1 .08, .12 0, .14 .08, .16 0, .18 .08, .2 0, .22 .08, .24 0, .26 .08, .28 0, .3 .08, .32 0,.34 .08, .36 0,.38 .08, .40 0,.42 .08, .44 0,.46 .08, .48 0,.5 .08, .52 0,.54 .08, .56 0,.58 .08, .6 0,.62 .08, .64 0,.66 .08, .68 0,.7 .08, .72 0,.74 .08, .76 0,.78 .08, .8 0,.82 .08, .84 0,.86 .08, .88 0,.9 .08, .92 0,.94 .08, .96 0,.98 .08, 1 0, 1 1, .98 .92, .96 1, .94 .92, .92 1, .9 .92, .88 1, .86 .92, .84 1, .82 .92, .80 1, .78 .92, .76 1, .74 .92, .72 1, .7 .92, .68 .1, .66 .92, .64 1, .62 .92, .60 1, .58 .92, .56 1, .54 .92, .52 1, .5 .92, .48 1, .46 .92, .44 1, .42 .92, .4 1, .38 .92, .36 1, .34 .92, .32 1, .30 .92, .28 1, .26 .92, .24 1, .22 .92, .20 1, .18 .92, .16 1, .14 .92, .12 1, .1 .92, .8 1, .6 .92, .4 1, .2 .92, 0 1"></polygon>
        </clippath>
    </defs>
</svg>
[PHP] pobierz, plaintext

Ale nada nie widać efektu. Jakiś inny pomysł?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.