Menggunakan Inline SVGs dengan HTML5

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

Tak usah dikatakan bahwa SVG tidak secara luas digunakan sebagai banyak orang di komunitas pengembangan web mungkin percaya harus. Pengaturan perdebatan samping, dalam tutorial ini, saya akan menunjukkan cara menggunakan inline SVGs, meliputi berbagai teknik dan mengeksplorasi interaksi antara halaman web dan grafis. Ketika digunakan dalam hubungannya dengan standar lainnya muncul dalam HTML5, JavaScript dan CSS3, inline SVGs dapat secara signifikan menambah pengalaman pengguna.

Langkah 1: Buat halaman HTML5

Anda dapat berinteraksi dengan unsur-unsur SVG yang menggunakan teknik DOM, seperti yang Anda lakukan dengan elemen halaman web lain.

Dalam tutorial ini, kita akan bekerja melalui sebuah contoh praktis dari inline SVG dengan menciptakan sebuah komponen sederhana yang mewakili sebuah dek rekaman. Catatan akan berputar, dan pengguna akan dapat berinteraksi dengan itu - menekan untuk memperlambat turun, dan melepaskan untuk mempercepat lagi. SVG juga akan berisi tombol yang pengguna dapat klik untuk mengubah catatan, menyebabkan penampilan untuk mengubah sedikit. SVG elemen yang terlihat akan ditingkatkan dengan gradien dan bayangan drop filter.

Check out demo sekarang sehingga Anda memiliki gagasan yang jelas dari apa yang kita sedang membangun.

Seperti Anda mungkin akan menyadari, inline SVGs jatuh dalam standar HTML5 muncul, sehingga kode yang kami gunakan dalam tutorial ini tidak akan sepenuhnya didukung di semua browser. Meskipun inline SVGs secara teoritis didukung dalam semua versi browser utama, internal animasi dan efek interaktif yang kita akan menggunakan tidak begitu baik didukung dulu. Hasil akhir akan berfungsi dengan benar dalam versi terbaru Firefox, Chrome, dan Opera. Seperti yang selalu dengan teknik HTML5, pastikan Anda tidak bergantung pada efek dalam situs hidup Anda bekerja pada, dan termasuk alternatif di mana mungkin.

Mari kita menggali dalam, dan mulai dengan membuat garis halaman HTML5, seperti:

<!DOCTYPE html>
<html>
<head>
<script>

</script>
<style>

</style>
</head>
<body>

</body>
</html>

Salah satu keuntungan utama menggunakan SVG adalah bagaimana scalable. Untuk memanfaatkan ini, kami terutama akan menggunakan nilai-nilai relatif untuk mendefinisikan isi SVG. Tambahkan sebuah wadah elemen untuk SVG dalam tubuh Halaman:

1	<div id="picHolder">
2
3	</div>

Untuk melihat bagaimana SVG duduk di dalam berisi elemen, tambahkan baris berikut ke bagian gaya di kepala halaman Anda:

1	#picHolder {background:#dedeff; border:1px solid #666666;}

Langkah 2: Tambahkan elemen SVG

Dalam wadah elemen dalam tubuh halaman Anda, tambahkan SVG elemen garis besar, sebagai berikut:

<svg version="1.1"
       baseProfile="full"
     	xmlns="https://www.w3.org/2000/svg" 
     	height="100%" width="100%">

</svg>

Kami telah mengatur lebar dan tinggi 100%, seperti yang kita akan menentukan lebar berisi elemen. Namun, daripada menentukan dimensi secara eksplisit, kita sebaliknya akan menggunakan fungsi JavaScript untuk mengungkapkan betapa mudahnya Anda dapat skala SVG naik dan turun. Anda dapat menyertakan tetap lebar dan tinggi dalam pembukaan SVG tag atau bagian gaya.

Step 3: Membuat definisi

Bentuk yang terlihat pada grafik akan didefinisikan di dalam elemen SVG. Sebelum itu, kita akan bekerja pada bagian defs. Bagian defs adalah di mana Anda menempatkan definisi yang Anda kemudian dapat merujuk ketika membuat bentuk Anda. Untuk tutorial ini, Bagian defs akan berisi definisi untuk beberapa mengisi gradien dan beberapa tetes bayangan. Menambahkan bagian baru di dalam elemen SVG:

1	<defs>
2
3	</defs>

Barang-barang yang kami menempatkan di bagian ini tidak akan benar-benar muncul dalam gambar, tetapi akan digunakan sebagai mengisi dan filter untuk bentuk yang lakukan. Kami akan menyertakan beberapa gradien mengisi; Jadi mari kita bekerja melalui masing-masing pada gilirannya.

Gradien

Pertama atas adalah gradien linier:

1	<linearGradient id="backGrad" x1="0%" y1="0%" x2="0%" y2="100%">
2	<stop offset="10%" style="stop-color:#990000; stop-opacity:1" />
3	<stop offset="90%" style="stop-color:#cccc00; stop-opacity:1" />
4	</linearGradient>

Gradien ini akan ditetapkan sebagai mengisi untuk wilayah persegi panjang latar belakang. X1 dan y1 atribut mewakili titik awal dari gradien dalam bentuk penuh, dengan gradien yang berlangsung dari sana ke titik yang diwakili oleh x2 dan y2. Dalam kasus ini, gradien akan berjalan dari atas ke bawah. Unsur-unsur berhenti mewakili warna poin di gradien. Yang pertama menyatakan bahwa 10% dari awal gradien akan menjadi padat warna merah gelap dan kedua berhenti bahwa 90% dari akhir gradien akan warna kuning. Antara dua titik, gradien akan memadukan warna ke dalam satu sama lain. Warna kedua memiliki penuh opacity.

Selanjutnya Mari kita tambahkan gradien catatan itu sendiri. Satu ini agak lebih kompleks - itu gradien radial dengan beberapa halte warna:

<radialGradient id="recordGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
	<stop offset="30%" style="stop-color:#000000; stop-opacity:1" />
	<stop offset="35%" style="stop-color:#222222; stop-opacity:1" />
	<stop offset="45%" style="stop-color:#000000; stop-opacity:1" />
	<stop offset="85%" style="stop-color:#000000; stop-opacity:1" />
	<stop offset="95%" style="stop-color:#222222; stop-opacity:1" />
	<stop offset="100%" style="stop-color:#000000; stop-opacity:1" />
</radialGradient>

Gradien radial dimulai dari dalam lingkaran, dengan yang terdalam dan terluar bagian lingkaran didefinisikan oleh cx, cy, fx dan Ta, tercantum di samping radius. Dalam kasus ini, gradien radial akan menduduki seluruh bentuk catatan melingkar. Sebagian besar catatan akan hitam, dengan dua gelang warna sedikit lebih ringan yang mewakili bagian halus di pusat catatan dan tepi. Kami akan menempatkan label rekaman di pusat juga, sehingga patch pertama dari warna lebih terang rekaman akan muncul di luar itu. Tambahkan mengisi gradien label berikutnya:

1	<linearGradient id="labelGrad0" x1="0%" y1="0%" x2="100%" y2="0%">
2	<stop offset="40%" style="stop-color:#000099; stop-opacity:1" />
3	<stop offset="60%" style="stop-color:#009900; stop-opacity:1" />
4	</linearGradient>

Ini adalah gradien linier sederhana yang akan digunakan sebagai mengisi untuk label rekaman melingkar. Namun, perhatikan bahwa ID gradien memiliki nol pada akhir itu. Hal ini disebabkan oleh fakta bahwa kita akan menambahkan fungsi interaktif, memungkinkan pengguna untuk "mengubah catatan". Fungsi JavaScript akan beralih di antara berbagai macam gradien mengisi untuk elemen label. Untuk tujuan ini, tambahkan beberapa gradien:

<linearGradient id="labelGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
	<stop offset="0%" style="stop-color:#990000; stop-opacity:1" />
	<stop offset="20%" style="stop-color:#ff6600; stop-opacity:1" />
	<stop offset="40%" style="stop-color:#cccc00; stop-opacity:1" />
	<stop offset="60%" style="stop-color:#009900; stop-opacity:1" />
	<stop offset="80%" style="stop-color:#000099; stop-opacity:1" />
	<stop offset="100%" style="stop-color:#990099; stop-opacity:1" />
</linearGradient>
        
<linearGradient id="labelGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
	<stop offset="0%" style="stop-color:#330033; stop-opacity:1" />
	<stop offset="100%" style="stop-color:#cc00cc; stop-opacity:1" />
</linearGradient>

Gradien memiliki ID yang berakhir dengan incrementing integer, sehingga kita bisa iterate melalui mereka di JavaScript. Sekarang, menetapkan lain gradien membuat efek Penyemiran di atas catatan:

<linearGradient id="shineGrad" x1="0%" y1="0%" x2="100%" y2="100%">
	<stop offset="35%" style="stop-color:#000000; stop-opacity:0" />
	<stop offset="50%" style="stop-color:#ffffff; stop-opacity:0.2" />
	<stop offset="65%" style="stop-color:#000000; stop-opacity:0" />
</linearGradient>

Saat ini, gradien menggunakan buram dan alpha transparan warna berhenti; efeknya akan bersinar halus di catatan. Akhirnya, kita perlu mengisi logam untuk tombol dan gelendong:

1	<radialGradient id="dialGrad" cx="50%" cy="60%" r="60%" fx="40%" fy="40%">
2	<stop offset="30%" style="stop-color:#cccccc;stop-opacity:1" />
3	<stop offset="100%" style="stop-color:#333333;stop-opacity:1" />
4	</radialGradient>

Kali ini, gradien radial adalah sedikit dari pusat untuk menciptakan rasa kedalaman dan cahaya, yang akan dilengkapi dengan filter bayangan drop.

Filter

Sebelum kita selesai dengan bagian defs, tambahkan beberapa tetes bayangan untuk memberikan beberapa bentuk sedikit lebih mendalam:

1	<filter id="recordShadow" x="0" y="0" width="200%" height="200%">
2	<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
3	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
4	</filter>

Satu ini akan muncul di belakang daerah rekaman. X, y, lebar dan tinggi properti merujuk pada posisi dan dimensi dalam bentuk menggunakan filter ini. Offset mendefinisikan bayangan relatif terhadap bentuk asli. Kabur mencegah bentuk offset dari menjadi warna solid, sehingga muncul sebagai sebuah bayangan. Dalam hal ini hanya bayangan akan muncul, bukan bentuk itu sendiri - bayangan akan ditentukan oleh bentuk yang berdedikasi yang akan ditempatkan di belakang bentuk catatan. Untuk kontrol pengguna, yang melingkar dan logam, kami juga ingin drop shadow, tapi kami ingin bentuk itu sendiri untuk menampilkan juga:

<filter id="dialShadow" x="0" y="0" width="200%" height="200%">
	<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

Perbedaan utama di sini, selain skala bayangan, adalah campuran unsur, yang akan menjaga bentuk asli sementara juga menampilkan bayangan di sekitarnya.

Step 4: Membuat bentuk

Itulah cukup persiapan; Mari kita dapatkan di dengan grafis! Setiap item yang Anda tambahkan ke tubuh SVG akan ditampilkan di atas unsur-unsur yang terdaftar sebelumnya, sehingga kami akan bekerja dari bawah ke atas, dimulai dengan bentuk yang di belakang dan berakhir dengan orang-orang di depan.

Persegi latar belakang

Pertama, tambahkan bentuk persegi panjang untuk latar belakang:

1	<rect width="90%" height="90%" x="5%" y="5%" fill="url(#backGrad)" />

Rect elemen dimensi dan posisi ditentukan relatif terhadap SVG berisi, yang, jika Anda ingat, adalah relatif terhadap ukuran berisi elemen. Kami akan menetapkan ini kemudian di JavaScript. Kami akan menggunakan nilai-nilai ukuran dan posisi yang relatif sedapat mungkin, sehingga seluruh gambar plus animasi, dan interaksi skala dapat naik atau turun pada permintaan. Perhatikan bahwa elemen mengisi menentukan salah satu gradien kita didefinisikan, menggunakan atribut ID nya.

Bayangan

Berikutnya dari bawah adalah bayangan catatan, menggunakan salah satu filter bayangan drop kami membuat:

1	<circle cx="50%" cy="50%" r="33%" fill="#000000" filter="url(#recordShadow)" />

Bayangan akan mendasari catatan, sebagai bentuk lingkaran dengan radius yang kira-kira sepertiga dari ruang yang dialokasikan ke gambar, ditempatkan di tengah. Karena filter dalam hal ini tidak berlaku pencampuran dengan gambar, lingkaran itu sendiri tidak akan muncul, hanya bayangan.

Catatan

Selanjutnya adalah catatan itu sendiri:

1	<circle cx="50%" cy="50%" r="33%" fill="url(#recordGrad)" />

Seperti dengan bayangan, cx dan cy atribut mewakili pusat catatan, yang berpusat di gambar secara horizontal dan vertikal, dengan jari-jari sekitar sepertiga. Sekali lagi, kami menggunakan salah satu gradien kita didefinisikan, yang kita akan lakukan dalam bentuk masing-masing.

Label

Di atas sumber catatan adalah label, sehingga menambahkan berikut:

1	<circle id="recordLabel" cx="50%" cy="50%" r="10%" fill="url(#labelGrad0)" />

Lingkaran label memiliki titik pusat yang sama sebagai catatan, yang membentang sekitar sepertiga dari jalan. Kita mulai dengan yang pertama label gradien pilihan kita didefinisikan, dan akan menerapkan pengguna beralih di antara ini kemudian - kami menyertakan atribut ID di sini merujuk kepada elemen ini di JavaScript.

Penyemiran

Sekarang, mari kita menempatkan beberapa bersinar di atas catatan:

1	<circle id="shine" cx="50%" cy="50%" r="32%" fill="url(#shineGrad)" />

Ketika catatan berputar, itu akan bergerak ke kanan dan ke bawah hanya sedikit, jadi kita tetap bersinar sedikit lebih kecil daripada rekor sehingga tidak muncul untuk menyebarkan di luar itu ketika ia bergerak. Unsur ini juga memiliki atribut ID untuk mendeteksi interaksi pengguna.

Spindle

Untuk kelengkapan, mari kita tambahkan gilap kecil di pusat Catatan:

1	<circle cx="50%" cy="50%" r="1%" fill="url(#dialGrad)" filter="url(#dialShadow)" />

Bentuk ini menggunakan gradien logam yang kami ciptakan. Kami juga menerapkan kedua drop shadow filter, yang mencakup pencampuran sehingga bentuk dan bayangan muncul.

Tombol

Terakhir tetapi tidak paling, kita perlu sedikit tombol untuk pengguna untuk mengontrol mengubah catatan, menggunakan sama isi dan menyaring sebagai poros:

1	<circle cx="83%" cy="83%" r="3%" fill="url(#dialGrad)" filter="url(#dialShadow)">
2
3	</circle>

Saat ini, bukan unsur diri penutup, kami memisahkan pembukaan dan penutupan lingkaran tag. Hal ini karena kita akan menghidupkan tombol ketika pengguna mengklik ini, dan akan mencakup efek animasi antara tag ini. Perhatikan bahwa kita telah mampu menggunakan kembali mengisi dan filter elemen dari bagian defs. Berikut adalah tampilan awal dari grafik setelah dimensi halaman di tempat:

Langkah 5: Menambahkan animasi

Setiap item yang Anda tambahkan ke tubuh SVG akan ditampilkan di atas unsur-unsur yang terdaftar sebelumnya.

Sekarang kita memiliki kita unsur-unsur visual di tempat, mari kita tambahkan beberapa animasi. Kita dapat membuat putaran catatan menggunakan SVG animasi transformasi, yang merupakan perpanjangan dari SMIL animasi. Efek animasi ini didefinisikan dalam SVG markup. Efek berlaku untuk apa pun SVG elemen itu muncul dalam. Anda dapat menggunakan transformasi CSS3 pada SVG elemen, tetapi alternatif berbasis SMIL memberikan tingkat kontrol yang lebih besar.

Kami akan mencakup dua animasi sederhana: catatan akan berputar dan tombol akan bergerak sedikit ketika pengguna mengklik itu. Mari kita mulai dengan animasi sedikit lebih lurus ke depan tombol.

Di dalam elemen bentuk tombol, antara pembukaan dan penutupan lingkaran Tag kami menciptakan, tambahkan mengubah bernyawa sebagai berikut:

<animateTransform 
	attributeType="XML"
	attributeName="transform" 
	type="translate"
	from="0, 0" to="1, 1"
	dur="0.1s" begin="click"
	repeatCount="1"
	/>

AnimateTransform berlaku untuk XML atribut dalam elemen itu muncul dalam. Dalam kasus ini, itu adalah mengubah terjemahan. Dari dan ke atribut mewakili posisi awal dan akhir untuk elemen - ini adalah relatif terhadap posisinya awal, sehingga tombol akan bergerak ke kanan dan down oleh satu pixel. Mengubah akan dimulai ketika pengguna mengklik, berlalu lebih dari sepersepuluh detik, dan jalankan begitu. Tombol akan kembali ke posisi semula ketika animasi selesai. Tip: Untuk menjaga sebuah elemen dalam posisi akhir setelah animasi, menentukan isi = "freeze".

Sekarang untuk berputar catatan. AnimateTransform berlaku untuk SVG elemen, tetapi kita perlu berputar untuk menerapkan untuk lebih dari satu elemen - khusus untuk catatan dan label (tidak untuk bersinar atau bayangan). Daripada menciptakan animasi yang terpisah untuk masing-masing dan mengeksekusi mereka secara bersamaan, kita dapat menggunakan mengubah satu dengan mengelompokkan elemen-elemen ini. Sebelum elemen lingkaran mewakili catatan (dengan "recordGrad" sebagai yang mengisi) menambahkan membuka grup tag:

<g>

Setelah lingkaran mewakili label, menutup grup:

</g>

Sekarang tambahkan mengubah sebelum penutupan ini kelompok tag sehingga berlaku untuk seluruh kelompok:

<animateTransform id="spinTrans"
	attributeType="XML"
	attributeName="transform" 
	type="rotate" 
	by="360, 1, 1"
	dur="1s"
	repeatCount="indefinite"
	/>

Saat ini, efek animasi yang mengubah memutar. Elemen berputar 360 derajat, dan, untuk menambah efek, akan bergerak ke kanan dan ke bawah oleh satu pixel pada setiap rotasi, selama jangka waktu satu detik, mengulangi tanpa batas. Mengubah ini juga akan menyertakan atribut from, seperti diperlukan untuk menentukan posisi awal dari unsur-unsur yang sedang diputar. Jika Anda tidak menentukan posisi ini, unsur-unsur berputar di sekitar 0, titik 0 secara default. Namun, pada saat ini, Anda tidak dapat memasok relatif (yaitu persentase) nilai untuk atribut ini, hanya tetap nilai-nilai. Untuk alasan ini, kita akan mengatur dari atribut ketika kita menetapkan dimensi SVG dalam JavaScript.

Langkah 6: Menambahkan interaksi

Sekarang mari kita menerapkan fungsi interaktif kami: mengklik tombol untuk mengubah catatan dan menekan catatan untuk memperlambat turun.

Mengubah rekor

Pertama, dalam skrip bagian kepala halaman Anda, menambahkan variabel ini untuk menghitung dan melacak desain label:

1	//keep track of current record label
2	var currLabel = 0;
3	//alter this for a different number of labels
4	var numLabels = 3;

Sekarang, di dalam tag pembuka untuk elemen lingkaran mewakili tombol (yang sekarang memiliki animasi antara dengan tag), tambahkan berikut klik pendengar acara:

1	onclick="changeRecord()"

Kembali di bagian kepala script, tambahkan garis fungsi:

1	function changeRecord() {
2
3	}

Setiap kali user menekan tombol, kita akan bergerak untuk label berikutnya, pindah kembali ke pertama ketika kita mencapai terakhir:

//move to next label
currLabel++;

//reset if at highest number
if (currLabel > numLabels - 1) currLabel = 0;

//set the fill attribute to the next gradient
document.getElementById("recordLabel").setAttribute("fill", "url(#labelGrad"+currLabel+")");

Baris terakhir di sini menunjukkan bagaimana Anda dapat berinteraksi dengan unsur-unsur SVG yang menggunakan teknik DOM, seperti yang Anda lakukan dengan elemen halaman web lain. Di sini, kita menetapkan atribut mengisi unsur lingkaran label menggunakan mengisi gradien berikutnya, menetapkan id yang mengisi.

Lambat turun

Sekarang menambahkan atribut acara berikut untuk elemen Penyemiran catatan (dengan "shineGrad" sebagai yang mengisi), seperti yang kita akan Gunakan mouse ke bawah dan atas peristiwa di atasnya untuk memicu memperlambat catatan dan mempercepat lagi:

1	onmousedown="onRecord()" onmouseup="offRecord()"

Kembali di bagian skrip, tambahkan fungsi untuk ketika user menekan Catatan:

1	//function called when user is pressing record
2	function onRecord() {
3
4	}

Dalam fungsi ini, kita dapat memperlambat catatan berputar animasi dengan mengubah atribut durasi animateTransform. Kita juga mengubah opacity Penyemiran untuk menciptakan kesan menekan turun ke:

1	//slow the animation duration
2	document.getElementById("spinTrans").setAttribute("dur", "5s");
3	//decrease the shine opacity
4	document.getElementById("shine").style.opacity="0.7";

Saat user melepaskan catatan, kami ingin untuk kembali ke kecepatan normal dan penampilan, sehingga menambahkan "mouse up" fungsi berikut:

//function called when user releases record
function offRecord() {
	//reset to normal speed
	document.getElementById("spinTrans").setAttribute("dur", "1s");

	//set opacity back to normal
	document.getElementById("shine").style.opacity="1.0";
}

Langkah 7: Tentukan ukuran

Kami akhirnya dapat mengatur ukuran keseluruhan SVG sekarang. Di bagian atas bagian skrip, tambahkan sebuah variabel baru:

1	//desired size of SVG
2	var size = 300;

Kami pada awalnya akan menggunakan 300 piksel untuk lebar dan tinggi dari grafis, tapi Anda bebas untuk mengubah ini pada setiap titik. Mendefinisikan fungsi dalam skrip bagian untuk menetapkan dimensi ini:

//function to set SVG dimensions
function setSize() {
	//set css and transform size
	var holder = document.getElementById("picHolder");

	holder.style.height=size+"px";
	holder.style.width=size+"px";
	document.getElementById("spinTrans").setAttribute("from", "0, "+size/2+", "+size/2+"");
}

Kami menetapkan ukuran pada elemen div berisi. Luangkan waktu sejenak untuk melihat baris terakhir dalam fungsi ini. Karena animasi memutar mengubah tidak menggunakan nilai-nilai persentase relatif, kita harus menetapkan dari elemen menggunakan variabel ukuran (dibagi dua untuk titik sentral dari catatan). Dengan 300 seperti ukuran SVG, ini adalah bagaimana mengubah akan muncul dengan nilai-nilai yang tetap:

<animateTransform id="spinTrans"
	attributeType="XML"
	attributeName="transform" 
	type="rotate" 
	from="0, 150, 150"
	by="360, 1, 1"
	dur="1s"
	repeatCount="indefinite"
	/>

Jika Anda ingin menggunakan nilai-nilai yang tetap di SVG Anda Anda dapat melakukannya. Kami hanya menggunakan teknik ini untuk menunjukkan menggunakan dimensi relatif. Akhirnya, memanggil fungsi ini pada akhir bagian script:

1	window.addEventListener("DOMContentLoaded", setSize, false);

Kesimpulan

Animasi SVG interaktif kami telah selesai! Buka halaman Anda di browser pendukung untuk melihat efek; Jangan lupa untuk mencoba berinteraksi dengan catatan dan tombol. Mencoba mengubah variabel ukuran untuk melihat bagaimana unsur-unsur SVG semua beradaptasi sesuai, termasuk animasi dan interaksi.

Jika Anda ingin menjelajahi SVG lebih lanjut, beberapa topik untuk mempertimbangkan termasuk jalur, teks, masking dan kliping. Ada juga berbagai tambahan animasi pilihan untuk dipertimbangkan. Tentu saja, efek ini tidak akan bekerja untuk semua pengguna sekarang, tapi mudah-mudahan suatu hari nanti...