Bagaimana untuk menarik logo SVG dalam HTML5?-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

Bagaimana untuk menarik logo SVG dalam HTML5?

PHPz

Aug 22, 2023 pm 11:41 PM

Bagaimana untuk menarik logo SVG dalam HTML5?

Dalam artikel seterusnya, kita akan belajar cara melukis logo SVG dalam HTML5. Sebelum kita mula membaca artikel itu, mari kita bincangkan beberapa perkara tentang SVG. Grafik Vektor Boleh Skala (SVG) ialah format imej yang menggunakan data vektor. Tidak seperti format lain, SVG tidak menggunakan piksel unik untuk membina imej, sebaliknya menggunakan data vektor.

Perkara terbaik tentang menggunakannya ialah menggunakan SVG anda boleh mencipta imej yang menyesuaikan diri dengan sebarang resolusi, yang menjadikannya ideal dalam reka bentuk web dan banyak aplikasi lain.

Mari kita lihat contoh mudah untuk memahami SVG dengan lebih baik

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<body>
   <svg width="110" height="150">
      <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="green" />
   </svg>
</body>
</html>

Apabila skrip dilaksanakan, ia akan menghasilkan output yang mengandungi bulatan SVG yang dilukis pada halaman web menggunakan dimensi yang diberikan dalam skrip di atas.

Apa itu SVG

Gunakan SVG (bahasa penanda) untuk menerangkan grafik vektor dua dimensi. Ini ialah teknologi berasaskan teks yang boleh digunakan dengan teknologi lain seperti CSS, DOM, JavaScript dan SMIL untuk menerangkan imej dalam sebarang saiz.

Imej vektor dalam format SVG, contohnya, boleh diskalakan tanpa kehilangan kualiti. Tidak seperti imej bitmap seperti JPEG dan PNG, ia juga boleh disetempatkan tanpa memerlukan editor grafik.

Berikut ialah contoh melukis logo SVG dalam HTML5

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Dalam contoh di bawah, kami sedang mencipta logo SVG pada halaman web.

<!DOCTYPE html>
<html>
<body>
   <svg height="130" width="500">
      <defs>
         <linearGradient id="tutorial" x1="10%" y1="5%" x2="90%" y2="10%">
            <stop offset="0"
            style="stop-color:rgb(187, 143, 206);" />
            <stop offset="1"
            style="stop-color:rgb(192, 57, 43);" />
         </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#tutorial)" />
      <text fill="#58D68D" font-size="14" font-family="Verdana"
      x="50" y="86">TUTORIALSPOINT</text>
   </svg>
</body>
</html>

Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada elips yang dilukis dengan kecerunan linear dengan teks "TUTORIALSPOINT", yang bertindak sebagai logo pada halaman web.

Terjemahan bahasa Cina bagi

Contoh 2

ialah:

Contoh 2

Pertimbangkan contoh berikut, kami sedang mencipta logo SVG pada halaman web

<!DOCTYPE html>
<html>
<body>
   <svg width="140px" height="320px">
      <rect x="19" y="19" width="110" height="300"
      fill="white" stroke="black" stroke-width="3" />
      <circle cx="75" cy="85" r="30"
      fill="red" stroke="black" stroke-width="2" />
      <circle cx="75" cy="165" r="30"
      fill="yellow" stroke="black" stroke-width="2" />
      <circle cx="75" cy="245" r="30"
      fill="#40CC40" stroke="black" stroke-width="2" />
   </svg>
   <p>FOLLOW TRAFFIC SIGNALS</p>
</body>
</html>

Apabila skrip di atas dijalankan, ia akan menghasilkan output yang mengandungi lampu isyarat yang dilukis pada halaman web menggunakan ukuran yang diberikan dalam skrip di atas, yang bertindak sebagai tanda.

Contoh 3

Mari kita lihat satu lagi contoh mencipta logo SVG pada halaman web.

<!DOCTYPE html>
<html>
<head>
   <title>HTML5 SVG logo</title>
</head>
<body>
   <svg height="170" width="400">
      <defs>
         <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%"
            style="stop-color:rgb(184,78,43);stop-opacity:1" />
            <stop offset="50%"
            style="stop-color:rgb(241,241,241);stop-opacity:1" />
            <stop offset="100%"
            style="stop-color:rgb(255,141,52);stop-opacity:1" />
         </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
      <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
      x="50" y="86">logo</text>
   </svg>
</body>
</html>

Selepas menjalankan skrip di atas, tetingkap output akan muncul menunjukkan logo SVG dengan kecerunan linear yang dilukis pada halaman web menggunakan ukuran yang dinyatakan dalam skrip di atas.

Atas ialah kandungan terperinci Bagaimana untuk menarik logo SVG dalam HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.