หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

4 วิธีในการแนะนำภาพ Svg ลงในหน้าเว็บ html

ผู้เขียน：Eve Cole เวลาอัปเดต：2024-12-18 10:41:14

การพัฒนาแอปพลิเคชันเว็บใช้อิมเมจ SVG โดยสรุป มีสี่วิธี:

1. แทรกลงในหน้าโดยตรง 2. การแนะนำแท็ก img 3. การแนะนำ CSS 4. มีการแนะนำแท็กวัตถุ

1. แทรกลงในหน้าโดยตรง

ในหน้า html คุณสามารถใช้แท็ก svg ได้โดยตรง

<!DOCTYPE html>
<html>
	<หัว>
		<meta charset="utf-8">
		<title></title>
	</หัว>
	<ร่างกาย>
		<!-- รูปภาพ svg-->
		<svg width="200" height="150" style="border: 1px ทึบ steelblue">
			<!-- มีสี่เหลี่ยมอยู่ข้างใน -->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</ร่างกาย>
</html>

ผลการดำเนินงาน:

1

2. การแนะนำแท็ก img

นอกเหนือจากการเขียนแท็ก svg ในหน้าเว็บโดยตรงแล้ว คุณยังสามารถนำเข้าแท็กเหล่านั้นผ่าน img ได้ เช่นเดียวกับการนำเข้ารูปภาพ jpeg และ png

1) สร้างรูปภาพ svg ใหม่

จากนั้นเราจำเป็นต้องสร้างไฟล์รูปภาพ svg ใหม่ก่อน และใช้ svg ที่เขียนโดยตรงในหน้าเว็บด้านบน:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
	<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

มีความแตกต่างสองประการในเนื้อหาที่นี่:

1. คุณต้องประกาศแอตทริบิวต์ xmlns ของเนมสเปซ สามารถแสดงอยู่ในเอกสารอ้างอิงท้ายบทความนี้ 2. ลบสไตล์ที่เขียนไว้บนแท็ก svg, style="border: 1px solid steelblue" ออก

บันทึกเนื้อหาลงในไฟล์ test.svg นี่คือไฟล์รูปภาพ คุณสามารถลองเปิดในเบราว์เซอร์ได้

2) นำเข้าโดยใช้แท็ก img

สมมติว่า test.svg และไฟล์หน้าเว็บอยู่ในไดเรกทอรีเดียวกัน:

<img src="test.svg" style="border: 1px solid steelblue" />

เช่นเดียวกับการแนะนำ jpeg และ png คุณสามารถตั้งค่าเส้นทางรูปภาพได้โดยตรงด้วยแอตทริบิวต์ src นอกจากนี้ เรายังย้ายสไตล์ svg ดั้งเดิมไปที่แท็ก img

เอฟเฟกต์การวิ่งจะเหมือนกับด้านบน:

2

มีรูปภาพ SVG มากมายบนอินเทอร์เน็ต คุณสามารถอ้างถึง: https://www.iconfont.cn เว็บไซต์ไอคอนที่ดี

3

3. การแนะนำ CSS

การแนะนำ CSS คือการแนะนำรูปภาพเป็นภาพพื้นหลัง:

<style type="text/css">
	.svg {
		ความกว้าง: 200px;
		ความสูง: 150px;
		เส้นขอบ: 1px สีน้ำเงินทึบ;
		ภาพพื้นหลัง: url (test.svg); // นำเข้าเป็นพื้นหลัง }
</สไตล์>
<div class="svg"></div>

4. การแนะนำวัตถุ

เช่นเดียวกับการนำเข้า img คุณต้องมีไฟล์ svg จากนั้นนำเข้าด้วยข้อมูลแอตทริบิวต์:

<object data="test.svg" style="border: 1px solid steelblue"></object>

เอฟเฟกต์การวิ่งจะคล้ายกับที่กล่าวมาข้างต้น ไม่มีการแมปอีกต่อไป

แท็กอื่นๆ

แม้ว่าแท็กอื่นๆ เช่น แท็กฝังและ iframe สามารถนำมาใช้ได้ แต่ไม่แนะนำให้ใช้ สำหรับรายละเอียด โปรดดูข้อมูลอ้างอิงที่แสดงอยู่ท้ายบทความนี้

อ้างอิง

เนมสเปซ: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

แท็กฝัง: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

แท็ก iframe: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

นี่เป็นการสรุปบทความนี้เกี่ยวกับ 4 วิธีในการแนะนำรูปภาพ svg ลงในหน้าเว็บ HTML สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแนะนำรูปภาพ svg ลงใน HTML โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่างต่อไป ในอนาคต รองรับ downcodes.com!

บทความที่เกี่ยวข้อง