本论坛支持使用 svg 语言绘制图形,下面是几个简单的例子

(30,40)坐标 (180,130)

 绘制这些图形的 SVG 源代码如下

<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px">
<line x1="30" y1="40" x2="180" y2="130" style="stroke:Green;stroke-width:2"/>
<text x="10" y="35" font-size="10">(30,40)坐标</text>
<text x="160" y="140" font-size="10">(180,130)</text>
</svg>

<svg id="svgPolygonTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px">
<polygon id="myPolygon" points="20,50 35,150 90,70 140,160 180,45" style="fill:#63BCF7;stroke:black;stroke-width:3"/>
</svg>

<svg id="svgRectangleTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px">
<rect id="myRectangle" x="30" y="60" width="150" height="80" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>

<svg id="svgCircleTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px">
<circle id="myCircle" cx="100" cy="100" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2"/>
</svg>

<svg id="svgEllipseTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px">
<ellipse id="myEllipse" cx="100" cy="100" rx="80" ry="40" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg/>

<embed width="200" height="200" script='border = 0
initPicture(-10,10)
axes()
stroke = "red"
p = []
with (Math)
for (t = 0; t < 10.01; t += 0.05)
p[p.length] = [t*cos(PI*t), t*sin(PI*t)]
path(p)'>

而如果你想更好地学习 svg 语言的绘图功能,请仔细阅读下面的两份教程
svg 绘图语言入门(中文)   (英文)
用 svg 绘制数学函数图形参考资料(英文)

返回电动中国论坛首页

返回 cnedres 主页