写一个SVG图形

来源：互联网发布：中越中美网络大战编辑：程序博客网时间：2024/05/16 15:01

上一文《SVG图形初探》中已经讲到了SVG在Android 5.0中已经支持，且SVG是一个可以编辑的xml文件。那我们是否可以自己写一个xml文件，达到一个图形效果呢？答案是当然的。具体语法先不讲（因为目前我也不清楚），先看看写一个简单的SVG图形，后续再来分析简单语法。

打开记事本等编辑器，粘贴下面的代码，保存为1.svg。将svg文件用浏览器打开：

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg width="140" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">     <title>cat</title>     <desc>Stick Figure of a Cat</desc>     <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>     <circle cx="55" cy="80" r="5" style="stroke: black; fill: #339933"/>     <circle cx="85" cy="80" r="5" style="stroke: black; fill: #339933"/>     <g id="whiskers">         <link x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>         <link x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>     </g>     <use xlink:href="#whiskers" transform="scale(-1,1) translate(-140,0)" />     <!-- ears -->     <polyline points="108 62, 90 10,70 45, 50 10, 32 62" style="stroke: black; fill: none;" />     <!-- mouth -->     <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" />     <!-- nose -->     <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc;" />     <text x="30" y="165" style="font-family:sans-serif; font-size:14pt;">         Cat     </text>  </svg>

结果出现图形如下：

同时，我们可以修改xml文件的参数，改变颜色、文本、位置等。比如修改Cat为 My Cat:

好了，以上就是一个简单的svg图形。

0 0