Bagaimana cara menerapkan clipPath SVG ke elemen HTML yang tidak ada di pojok kiri atas dokumen di browser webkit

Saya telah mendefinisikan clipPath SVG dan menerapkannya ke beberapa DIV di halaman saya. Ini berfungsi/ditampilkan seperti yang diharapkan di FF, tetapi di Chrome dan Safari (semua versi terbaru), tampaknya clipPath hanya akan memengaruhi elemen HTML jika elemen HTML diposisikan di sudut kiri atas halaman.

Objek 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 untuk elemen yang akan dipotong

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

JSFIDDLE

Saya yakin artikel ini mulai membahas hal ini dengan menggunakan sistem koordinat, tetapi saya tersesat /bingung dengan sangat cepat beberapa kali. Sepertinya dikatakan bahwa dengan menggunakan satuan pengukuran dan koordinat yang berbeda, dimungkinkan untuk menerapkan clipPath ke elemen HTML apa pun... tapi saya benar-benar tidak yakin.

Saya mengekspor clipPath saya dari Illustrator jadi jika ada unit/koordinat berbeda yang perlu digunakan, saya tidak yakin bagaimana cara melakukannya.

Di Chrome dan/atau Safari, adakah yang berhasil menerapkan clipPath SVG (yang merupakan jalur sebenarnya - bukan poligon atau elips) ke elemen HTML yang terletak di tempat lain selain kiri atas halaman?


svg css clip-path
person Daveh0    schedule 26.04.2015    source sumber

Jawaban (3)


arrow_upward
0
arrow_downward

Saya pikir Tanggapan PaulOB di SitePoint menyelesaikan masalah ini dengan cukup baik. Singkat cerita: dukungan untuk menerapkan clipPath SVG ke elemen HTML belum cukup untuk browser webkit.

person Daveh0    schedule 27.04.2015

arrow_upward
0
arrow_downward

ketika saya sedang mencari jawaban untuk pertanyaan ini saya menemukan pertanyaan Anda. Saya menemukan semua jawaban termasuk jawaban: "Anda tidak bisa" menjadi sedikit solusi.

Saya terus mencoba, dan yang saya temukan adalah ini:

Ketika Anda memiliki svg clipPath, sejauh yang saya tahu, itu tidak dapat diposisikan, TETAPI jika Anda memperhitungkan bahwa Anda dapat melemparkannya ke dalam iframe dan kemudian memposisikan iframe, Anda emas.

Saya menyertakan tautan, dan saya tidak yakin berapa lama tautan itu akan bertahan sebelum 'meledak' karena saya bukan pemilik server.

contoh

Isi tautan itu cukup jelas, dan jika tidak aktif lagi, kirimkan pesan kepada saya atau balas postingan ini dan saya akan memperbaruinya di server saya sendiri di suatu tempat.

person David Johnson    schedule 08.05.2015

arrow_upward
0
arrow_downward

Masalah di Chrome dan Opera baru saja diperbaiki dan akan diluncurkan dalam beberapa minggu ke depan. Browser pun memang selalu menerapkan klip referensi di halaman asal. Perilaku baru ini harus cocok dengan Firefox.

person user3058245    schedule 23.06.2016