SVG的path的使用

SVG的path的使用；

参考：http://justcoding.iteye.com/blog/2226354

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
</head>
<body>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <g style="stroke:black;fill:none">
        <path d="M10 10L100 10"/>
        <path d="M10 20L100 20L100 50" />
        <path d="M40 60L10,60L40,42.68M60,60L90,60L60,42.68" />
    </g>
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <g style="stroke:black;fill:none">
        <path d="M10,10L40,10L40,30L10,30L10,10" />
        <!-- 使用Z进行封闭 -->
        <path d="M60,10L90,10L90,30L60,30Z" />
        <path d="M40,60L10,60L40,42.68ZM60,60L90,60L60,42.68Z" />
    </g>
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <g style="stroke:grey;stroke-width:8;fill:none">
        <!-- 自己封闭与使用Z封闭的不同之处:使用Z封闭会把线段的接口处封闭 -->
        <path d="M10,10L40,10L40,30L10,30L10,10" />
        <path d="M60,10L90,10L90,30L60,30Z" />
    </g>
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 这是大写字母的例子，下面是小写字母的例子 -->
    <path d="M10 10L20 10L20 30M40 40L55 35" style="stroke:black;stroke-width:1;fill:none" />
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 小写字母，表示相对位置，小写m启动路径，小写m开始与大写M一致 -->
    <path d="M10 10l10 0l0 20m20 10l15-5" style="stroke:black;stroke-width:1;fill:none" />
    <!-- 水平垂直的简写 H20 h20 V20 v20, 也是有大小写字母区分的 -->
    <path d="M12 24h15v25h-15Z" style="stroke:black;stroke-width:1;fill:none" />
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 椭圆弧： A/a + 7参数：rx,ry,x-axis-rotation,large-arc-flag(小于180度=0，大于180度=1),sweep-flag(负角=0，正角=1),endx,endy  -->
    <path d="M125,75A100,50,0,0,0,225,125" />
    <!-- 绘制了一个小半圆 -->
    <path d="M0,20A10,10,0,0,0,10,30" style="stroke:black;stroke-width:1;fill:none" />
    <!-- 绘制了一个大半圆,进行了填充，注意填充的方式 -->
    <path d="M0,10A10,10,0,1,1,10,20" style="stroke:black;stroke-width:1;fill:blue" />
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 二次贝塞尔曲线：Q x1Ctrl,y1Ctrl,xEnd,yEnd，下面是两个连续的二次贝塞尔曲线 -->
    <path d="M30,100Q80,30,100,100,130,65,200,80" style="fill:none;stroke:black;" />
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 二次贝塞尔曲线，流畅二次曲线命令：T xEnd,yEnd -->
    <path d="M30,100Q80,30,100,100T200,80" style="fill:none;stroke:black;" />
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 三次贝塞尔曲线:C x1Ctrl,y1Ctrl,x2Ctrl,y2Ctrl,xEnd,yEnd -->
    <path d="M20,80C50,20,150,60,200,120" style="fill:none;stroke:black;" />
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 三次贝塞尔曲线 -->
    <path d="M40,50C60,10,90,90,110,50" style="fill:none;stroke:black;" />
    <path d="M40,50C110,10,40,90,110,50" style="fill:none;stroke:black;" />
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 三次贝塞尔曲线， 平滑三次贝塞尔曲线:S x1Ctrl,y1Ctrl,xEnd,yEnd -->
    <path d="M30,100C50,30,70,50,100,100S150,40,200,80" style="fill:none;stroke:black;" />
</svg>
</div>
</body>
</html>