SVG的基础使用
SVG的基础使用：
<%@ 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> <!-- <svg width="140" height="170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Cat</title> <desc>Stick Figure of a Cat.</desc> <circle cx="70" cy="95" r="50" style="stroke:black;fill:none"></circle> <circle cx="55" cy="80" r="5" style="stroke:black;fill:#339933"></circle> <circle cx="85" cy="80" r="5" style="stroke:black;fill:#339933"></circle> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke:black"></line> <line x1="75" y1="95" x2="135" y2="135" style="stroke:black"></line> </g> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" /> <polyline points="108 62,90 10,70 45,50 10,32,62" style="stroke:black;fill:none"></polyline> <polyline points="35 110,45 120,95 120,105,110" style="stroke:black;fill:none"></polyline> <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke:black;fill:#ffcccc"></path> <text x="60" y="165" style="font-family:sans-serif;font-size:14pt;stroke:none;fill:black">Cat</text> </svg> <svg width="4cm" height="5cm" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 64 80"> <rect x="10" y="35" width="40" height="40" style="stroke:black;fill:none"></rect> <polyline points="10 35,30 7.68,50 35" style="stroke:black;fill:none"></polyline> <polyline points="30 75,30 55,40 55,40 75" style="stroke:black;fill:none"></polyline> </svg> --> <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" > <line x1="10" y1="10" x2="200" y2="10" style="stroke:black;stroke-width:5;" /> <line x1="10" y1="20" x2="200" y2="20" style="stroke:black;stroke-dasharray:9,5;" /> <line x1="10" y1="30" x2="200" y2="30" style="stroke:#9f9;stroke-width:5;" /> <line x1="10" y1="40" x2="200" y2="40" style="stroke:rgb(255,128,64);stroke-width:5;" /> <line x1="10" y1="50" x2="200" y2="50" style="stroke:rgb(60%,20%,60%);stroke-width:5;" /> <line x1="10" y1="60" x2="200" y2="60" style="stroke:rgb(60%,20%,60%);stroke-width:5;stroke-opacity:0.1" /> <rect x="10" y="70" width="30" height="50" style="stroke:black;fill:none;" /> <rect x="50" y="70" width="30" height="50" style="stroke:black;stroke-width:2;stroke-opacity:0.5;stroke-dasharray:9,5;fill:#9f9;fill-opacity:0.5" /> <rect x="90" y="70" width="30" height="50" ry="10" style="stroke:black;fill:none;" /> <ellipse cx="150" cy="100" rx="10" ry="20" style="stroke:black;fill:none;" /> <polygon points="15,150 55,150 45,160 5,160" style="stroke:black;fill:none;" />
<polyline points="5 20,20 20,25 10,35 30,45 10,55 30,65 10,75 30,80 20,95 20" style="stroke:black;fill:none;" />
</svg> </body> </html>
