SVG的Transform使用
SVG的Transform使用：
<%@ 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="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <g id="square"> <rect x="0" y="0" width="20" height="20" style="fill:none;stroke:black;stroke-width:2" /> </g> <use xlink:href="#square" transform="translate(50,50)" /> <use xlink:href="#square" transform="scale(2)" /> <use xlink:href="#square" transform="scale(3,1.5)" /> </svg> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <!-- 可以使用g进行统一变换 --> <g id="g1" transform="translate(3,5)" style="fill:none;stroke:black;" > <line x1="10" y1="10" x2="30" y2="30" /> <circle cx="20" cy="20" r="10" /> </g> <rect x="15" y="20" width="10" height="5" transform="scale(3)" style="fill:none;stroke:black;" /> </svg> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="15" width="20" transform="translate(30,20) scale(2)" style="fill:gray" /> </svg> <!-- 把变换放到g中，是一样的格式 --> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(30,20)"> <g transform="scale(2)"> <rect x="10" y="10" height="15" width="20" style="fill:gray"></rect> </g> </g> </svg> </div> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <!-- 变换顺序不同会影响最后的变换结果 --> <rect x="10" y="10" width="20" height="15" transform="translate(30,20) scale(2)" style="fill:gray"></rect> <rect x="10" y="10" width="20" height="15" transform="scale(2) translate(30,20)" style="fill:black"></rect> </svg> </div> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="3" style="fill:black"></circle> <g id="arrow" style="stroke:black"> <line x1="60" y1="50" x2="90" y2="50"></line> <polygon points="90 50,85 45,85 55"></polygon> </g> <!-- rotate(angle, centerX, centerY)可以指定中心点旋转 --> <use xlink:href="#arrow" transform='rotate(60,50,50)'/> <use xlink:href="#arrow" transform='rotate(-90,50,50)'/> <use xlink:href="#arrow" transform='rotate(-150,50,50)'/> <polyline points="20 20,30 20,30 30" style="stroke:black;fill:none"></polyline> <rect x=70 y=70 width=20 height=20 fill="grey" /> <rect x=70 y=70 width=20 height=20 fill="black" transform="rotate(45)" /> </svg> </div> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg" > <circle cx=50 cy=50 r=2 fill="black" /> <g id="box" style="stroke:black;fill:none"> <rect x=35 y=40 width=30 height=20></rect> </g> <!-- 围绕中心点缩放 translate(-cx(fac-1),-cy(fac-1)) scale(fac) style=stroke-width:1/fac --> <use xlink:href="#box" transform="translate(-50,-50) scale(2)" style="stroke-width:0.5"/> <use xlink:href="#box" transform="translate(-75,-75) scale(2.5)" style="stroke-width:0.4"/> <use xlink:href="#box" transform="translate(-100,-100) scale(3)" style="stroke-width:0.33"/> </svg> </div> <div> <svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg"> <!-- 以0,0 为中心进行绘制，然后再进行整体移动 --> <g transform="translate(50,50)" > <circle cx=0 cy=0 r=2 fill="black" /> <rect id="box1" x=-15 y=-10 width=30 height=20 style="stroke:black;fill:none" /> <use xlink:href="#box1" transform="scale(2)" style="stroke-width:0.5" /> <use xlink:href="#box1" transform="scale(2.5)" style="stroke-width:0.4" /> <use xlink:href="#box1" transform="scale(3)" style="stroke-width:0.33" /> </g> </svg> </div> </body> </html>
