SVG画矩形、半圆、三角形

news/2025/1/12 21:50:17/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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="97.096" y="49.827" fill="none" stroke="#FFFFFF" stroke-width="3.0821" width="656" height="493.141"/><circle name="中圈" fill="none" stroke="#FFFFFF" stroke-width="3.0821" cx="425.127" cy="296.913" r="50.683"/>
<circle name="开球点" fill="#FFFFFF" cx="425.126" cy="296.913" r="4.109"/><path name="禁区弧线1" fill="#FFFFFF" stroke="#0FFFFF" stroke-width="3.0821" d="M188.312,257.923c11.29,9.231,18.496,23.27,18.496,38.99c0,15.718-7.203,29.753-18.488,38.982"/>
<rect name="禁区1" fill="none" x="96.879" y="186.983"  stroke="#FFFFFF" stroke-width="3.0821" width="91.438" height="220.885"/>
<rect name="球门区1" fill="none" x="96.879" y="246.569"  stroke="#FFFFFF" stroke-width="3.0821" width="30.822" height="99.657"/>
<rect name="球门1" fill="#FFFFFF" x="80.442" y="276.365"  stroke="#0FFFFF" stroke-width="3.0821" width="16.437" height="40.066"/>
<circle name="点球点1" fill="#FFFFFF" cx="156.467" cy="296.913" r="4.11"/><path name="角球1" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M114.858,50.58 c0,9.93-8.051,17.981-17.981,17.981"/>
<path name="角球2" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M96.879,525.502 c9.93,0,17.979,8.052,17.979,17.981"/>
<path name="角球3" fill="none" stroke="#FFFFFF" stroke-width="3.0821" d="M735.59,543.483 c0-9.93,8.049-17.981,17.981-17.981"/><path name="三角形" fill="red" stroke="blue" d="M150 50 L130 130 L170 130  Z"/>
<rect name="矩形" fill="#FFFFFF" x="255" y="125"  stroke="#0FFFFF" stroke-width="3.0821" width="16.437" height="45"/>
<path d="M275,175 h-100 a100,100 0 1,0 100,-100 z" fill="red" stroke="blue" stroke-width="5"/>
<path d="M130 25  A 30 30 0 0 1 55 25" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
<path name="三角形" fill="red" stroke="blue" d="M550 250 L570 325 L530 325  Z"/>
<rect name="矩形" fill="#FFFFFF" x="580" y="250"  stroke="#0FFFFF" stroke-width="3" width="16" height="75"/>
<path d="M630 325  A 50 50 0 0 1 530 325" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/></svg>

下面这句话就是画半圆的

M630 325表示将点移动到此处；

A 表示画笔从当前的点绘制一段圆弧到点(x,y)

50 50是两个半轴长度

0 0 1表示控制旋转角度，等。详见博客http://blog.csdn.net/dusea/article/details/49492167

530 325表示终点坐标。

这里画个半圆，因此终点的y值一致。

注意控制50 50是两个半轴长度，如果超过了起点和终点之间的长度，就会画成一段弧形。