SVG sebaris HTML5

SVG Sebaris HTML5

Apakah itu SVG?

SVG bermaksud Grafik Vektor Boleh Skala

SVG digunakan untuk mentakrifkan grafik berasaskan vektor untuk web

SVG menggunakan grafik definisi Format XML

Imej SVG tidak akan kehilangan kualiti grafiknya apabila dibesarkan atau diubah saiznya

SVG ialah piawaian World Wide Web Consortium

Dengan SVG, kami boleh mencapai Banyak operasi lukisan adalah sama seperti jenis API Kanvas, tetapi apabila melukis teks pada elemen Kanvas, aksara akan ditetapkan padanya dalam piksel. Teks menjadi sebahagian daripada imej dan kandungan teks tidak boleh diubah melainkan kawasan lukisan Kanvas dilukis semula. Oleh sebab itu, teks pada Kanvas tidak boleh diambil oleh enjin carian, tetapi teks pada SVG boleh dicari. Contohnya, Google mengindeks teks daripada kandungan SVG di web.

Kelebihan SVG

Berbanding dengan format imej lain (seperti JPEG dan GIF), kelebihan menggunakan SVG ialah:

Imej SVG boleh dibuat dan diubah suai dengan editor teks

Imej SVG boleh dicari, diindeks, skrip atau dimampatkan

SVG boleh berskala

Imej SVG boleh Dicetak dengan kualiti tinggi pada sebarang resolusi

SVG boleh dibesarkan tanpa kehilangan kualiti imej

Tambah SVG pada halaman

Mod sebaris: Digunakan seperti elemen lain dalam HTML, berdasarkan aplikasi interaktif HTML, JavaScript dan SVG boleh ditulis.

<body>
    <svg width="200" height="200">
    </svg>
</body>

Kaedah keluar: Import fail SVG luaran dalam HTML melalui elemen <img>

Bentuk ringkas

SVG mengandungi elemen bentuk asas , seperti segi empat tepat, bulatan dan elips. Saiz dan kedudukan unsur bentuk ditakrifkan sebagai sifat. Sifat segi empat tepat ialah lebar dan tinggi. Bulatan mempunyai atribut r yang mewakili jejari. Mereka semua menggunakan sintaks CSS untuk menyatakan jarak, jadi unit termasuk px, titik, em, dsb.

Segi empat tepat: x="50" y="20" bermaksud titik permulaan segi empat tepat ialah (50,20)

<body>
    <svg width="200" height="200">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
    </svg>
</body>

Objek suis lukisan SVG dilakukan mengikut susunan ia muncul dalam dokumen objek. Jika kita melukis bulatan selepas melukis segi empat tepat, bulatan akan muncul di atas segi empat tepat.

Tambahkan kalangan:

<body>    
<svg width="200" height="200">        
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc">
</rect>        
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> 
</svg>
</body>

Ubah elemen SVG

Dalam SVG, berbilang elemen boleh digabungkan untuk membentuk satu kumpulan dan menjadi satu keseluruhan. Elemen

<g> mewakili "kumpulan" dan boleh digunakan untuk menggabungkan berbilang elemen berkaitan. Ahli kumpulan boleh dirujuk dengan ID. Di samping itu, kumpulan itu juga boleh diubah secara keseluruhan. Jika anda menambah atribut transformasi pada kumpulan, semua kandungan dalam kumpulan akan diubah. Sifat ubah termasuk putaran, ubah bentuk, penskalaan dan serong.

 <svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

Gunakan semula kandungan

Elemen <defs> dalam SVG digunakan untuk menentukan kandungan yang dikhaskan untuk kegunaan masa hadapan. Anda boleh menggunakan elemen <gunakan> untuk memautkan kandungan yang ditakrifkan oleh <defs> Dengan dua elemen ini, anda boleh menggunakan semula kandungan yang sama beberapa kali dan menghapuskan lebihan.

<svg width="200" height="200">
        <defs>
            <g  id="ShapeGroup">
                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
            </g>
        </defs>
        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>
    </svg>

Corak dan kecerunan

<svg>
<defs>
            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
            </pattern>
            <%--渐变--%>
            <linearGradient id="RedBlackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
      <rect x="0" y="20" width="100" height="80" stroke="red"
           fill="url(#RedBlackGradient)" />
        <circle cx="120" cy="80" r="40" stroke="#00f"
            stroke-width="8" fill="url(#GravelPattern)" />
    </svg>

Laluan

<path> tentukan laluan.

<teg laluan digunakan untuk menentukan laluan.

Arahan berikut boleh digunakan untuk data laluan:

M = moveto

L = lineto

H = horizontal lineto

V = garis menegak

C = lengkung

S = lengkung licin

Q = lengkung Belzier kuadratik

T = lengkung Belzier kuadratik licin

A = Lengkok elips

Z = closepath

Nota: Semua arahan di atas membenarkan huruf kecil. Huruf besar bermaksud kedudukan mutlak, huruf kecil bermaksud kedudukan relatif.

SVG mengandungi bentuk ringkas serta laluan bentuk bebas. Elemen laluan mempunyai atribut d, yang mewakili data laluan. Dalam nilai d, M mewakili Move to, L mewakili Line to, Q mewakili lengkung kuadratik, dan Z mewakili laluan tertutup.

 <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

Teks

Teks dalam SVG berbeza sedikit daripada definisi gaya dalam CSS

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

Kedua-dua SVG dan Kanvas Perbezaan antara

SVG ialah bahasa yang menggunakan XML untuk menerangkan grafik 2D.

Kanvas menggunakan JavaScript untuk melukis grafik 2D.

SVG adalah berdasarkan XML, yang bermaksud setiap elemen dalam SVG DOM tersedia. Anda boleh melampirkan pengendali acara JavaScript pada elemen.

Dalam SVG, setiap bentuk yang dilukis dianggap sebagai objek. Jika sifat objek SVG berubah, penyemak imbas boleh menghasilkan semula grafik secara automatik.

Kanvas dipaparkan piksel demi piksel. Dalam kanvas, sebaik sahaja grafik dilukis, ia tidak lagi mendapat perhatian pelayar. Jika kedudukannya berubah, keseluruhan pemandangan perlu dilukis semula, termasuk sebarang objek yang mungkin telah diliputi oleh grafik.

Meneruskan pembelajaran