经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 软件/图像 » SVG » 查看文章
html缃戦〉寮曞叆svg鍥剧墖鐨?绉嶆柟寮廮HTML/Xhtml
来源:jb51  时间:2022/8/15 15:42:41  对本文有异议

web搴旂敤寮€鍙戜娇鐢╯vg鍥剧墖锛屾€荤粨浜嗕笅锛屽彲浠ユ湁濡備笅4绉嶆柟寮忥細

1. 鐩存帴鎻掑叆椤甸潰銆?br /> 2. img鏍囩寮曞叆銆?br /> 3. css寮曞叆銆?br /> 4. object鏍囩寮曞叆銆?/p>

1. 鐩存帴鎻掑叆椤甸潰

鍦╤tml椤甸潰锛屽彲浠ョ洿鎺ヤ娇鐢╯vg鏍囩銆?/p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 涓€涓猻vg鍥剧墖 -->
		<svg width="200" height="150" style="border: 1px solid steelblue">
			<!-- 閲岄潰鏈変竴涓煩褰?-->
			<rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
		</svg>
	</body>
</html>

杩愯鏁堟灉锛?/p>

1

2. img鏍囩寮曞叆

闄や簡鍦ㄧ綉椤甸噷鐩存帴鍐檚vg鏍囩锛屼篃鍙互閫氳繃img寮曞叆锛屽氨鍍忓紩鍏peg銆乸ng鍥剧墖涓€鏍枫€?/p>

1锛夋柊寤簊vg鍥剧墖

閭d箞鎴戜滑灏辫鍏堟柊寤轰竴涓猻vg鍥剧墖鏂囦欢锛屾垜浠妸涓婇潰鐩存帴鍐欏湪缃戦〉閲岀殑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. 闇€瑕佸0鏄庡懡鍚嶇┖闂?xmlns 杩欎釜灞炴€э紝鍛藉悕绌洪棿鍙互鏈枃灏鹃儴鍒楀嚭鐨勫弬鑰冭祫鏂欍€?br /> 2. 绉婚櫎浜嗗師鍏堝啓鍦?svg 鏍囩涓婄殑鏍峰紡锛宻tyle="border: 1px solid steelblue"銆?/p>

鎶婂唴瀹逛繚瀛樺埌test.svg鏂囦欢锛岃繖涓氨鏄竴寮犲浘鐗囨枃浠朵簡锛屽彲浠ュ皾璇曞湪娴忚鍣ㄦ墦寮€鐪嬬湅銆?/p>

2锛変娇鐢╥mg鏍囩寮曞叆

鍋囪test.svg鍜岀綉椤垫枃浠跺湪鍚屼竴涓洰褰曚笅锛?/p>

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

鍜屽紩鍏peg銆乸ng绫讳技锛岀洿鎺rc灞炴€ц缃浘鐗囪矾寰勫嵆鍙紝鍙﹀鎴戜滑鎶婂師鍏堝湪svg鐨勬牱寮忕Щ鍒颁簡img鏍囩杩欒竟銆?/p>

杩愯鏁堟灉鍜屼笂闈㈡槸涓€鏍风殑锛?/p>

2

鐜板湪缃戜笂鏈夊緢澶歴vg鍋氱殑鍥剧墖锛屽彲浠ュ弬鑰冿細https://www.iconfont.cn锛屼竴涓笉閿欑殑icon鍥炬爣缃戠珯銆?/p>

3

3. css寮曞叆

css寮曞叆灏辨槸鎶婂浘鐗囧綋鎴愯儗鏅浘寮曞叆锛?/p>

<style type="text/css">
	.svg {
		width: 200px;
		height: 150px;
		border: 1px solid steelblue;
		background-image: url(test.svg); // 褰撴垚鑳屾櫙寮曞叆
	}
</style>
<div class="svg"></div>

4. object寮曞叆

鍜宨mg寮曞叆绫讳技锛岄渶瑕佷竴涓猻vg鏂囦欢锛岀劧鍚庣敤灞炴€ata寮曞叆锛?/p>

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

杩愯鏁堟灉鍜屼笂闈㈢被浼硷紝灏变笉鍐嶈创鍥俱€?/p>

鍏朵粬鏍囩

鍏朵粬鏍囩濡傦細embed銆乮frame鏍囩铏界劧涔熷彲浠ュ紩鍏ワ紝浣嗘槸涓嶆帹鑽愪娇鐢ㄤ簡锛岃鎯呭彲浠ュ弬鑰冩湰鏂囧熬閮ㄥ垪鍑虹殑鍙傝€冭祫鏂欍€?/p>

鍙傝€冭祫鏂?/h3>

鍛藉悕绌洪棿锛?a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/SVG/Namespaces_Crash_Course

embed鏍囩锛?a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

iframe鏍囩锛?a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies" target="_blank">https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

鍒版杩欑瘒鍏充簬html缃戦〉寮曞叆svg鍥剧墖鐨?绉嶆柟寮忕殑鏂囩珷灏变粙缁嶅埌杩欎簡,鏇村鐩稿叧html寮曞叆svg鍥剧墖鍐呭璇锋悳绱㈣剼鏈箣瀹朵互鍓嶇殑鏂囩珷鎴栫户缁祻瑙堜笅闈㈢殑鐩稿叧鏂囩珷锛屽笇鏈涘ぇ瀹朵互鍚庡澶氭敮鎸佽剼鏈箣瀹讹紒

 友情链接: NPS