SVG 简单知识小结

刚刚写完 WebDocument 关于 MathML 和 SVG 的作业,做一个小总结.

1. 定义:
SVG (Scalable Vector Graphics - 可缩放矢量图形) 是基于可扩展标记语言 (XML), 用于描述二维矢量图形的一种图形格式.


2. SVG.xml 文件头内容:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    ...
</svg>


3. 画线段 (亦可作为画可封口的多边形):

<path id="BoxOX100points"
        d="M 0 100 L 1100 100
             M 0 200 L 1100 200
             M 0 300 L 1100 300
             M 0 400 L 1100 400
             M 0 500 L 1100 500"
        style="stroke:gray;stroke-width:2;fill-opacity:0"/>
PS: 如果需要画连续的线段,则是一个 "M " 后面一直接着写 "L " 就行了. 如果是多边形,则简单的在画完连续的线段之后,以 "z" 结尾.
例子: 
<path id="OXArrow"        
          d="M 1090 310 L 1090 290 L 1100 300 z"
          style="fill:black;stroke:black;strok-width:2"/>


4. 画长方形:
<rect x="0" y="0" width="1100" height="600" style="fill:rgb(158, 158, 158); stroke:rgb(158, 158, 158); stroke-width:1"/>


5. 画圆:
<circle cx="250" cy="399.99" r="7" style="fill-opacity: 0; stroke-width: 1; stroke: black;"/>


6. 添加文字:
<text fill="black" font-size="20" x="540" y="330">0</text>


7. 文件合并时需要注意的事项
最终需要将MathML.xml文件与SVG.xml文件合并到一个Labor.xml中.
1) 此时需要用到namespace,将MathML与SVG的声明分开,
2) 修改svg图在最终Labor.xml中显示的范围大小.
<svg:svg width="1100" height="600" xmlns:svg="http://www.w3.org/2000/svg">
...
</svg:svg>