svg 画三角形、圆、矩形等

最新推荐文章于 2026-05-01 08:38:44 发布

原创最新推荐文章于 2026-05-01 08:38:44 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #svg

前端专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一个使用SVG格式绘制的球场图形实例，详细展示了球场各部分的名称与位置，包括球场边界、中圈、中线、开球点、禁区、球门区及球门等元素。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="841.89px" height="595.275px" viewBox="0 0 841.89 595.275" enable-background="new 0 0 841.89 595.275"
	 xml:space="preserve">
 
 
<rect name="球场" x="0" y="0" fill="#000000" stroke="#000000" stroke-width="2" width="600" height="400"/>
<circle name="中圈" fill="none" stroke="#FFFFFF" stroke-width="3" cx="300" cy="200" r="50"/>
<path name="中线"  stroke="#FFFFFF"  stroke-width="3" d="M300 0 L300 400 Z"/>
<circle name="开球点" fill="#FFFFFF" cx="300" cy="200" r="4"/>

<rect name="禁区" fill="none" x="0" y="100"  stroke="#FFFFFF" stroke-width="3" width="100" height="200"/>
<rect name="球门区" fill="none" x="0" y="150"  stroke="#FFFFFF" stroke-width="3" width="30" height="100"/>
<rect name="球门" fill="#FFFFFF" x="0" y="180"  stroke="#0FFFFF" stroke-width="3" width="15" height="40"/>


<path name="角球" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M114,50.58 c0,9.93-8.051,17.981-17.981,17.981"/>
<path name="三角形" fill="red" stroke="blue" d="M150 50 L130 130 L170 130  Z"/>
</svg>