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>
SVG的Transform使用的更多相关文章
- Snap.svg中transform旋转值的“r+数组”表现形式
Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG中 transform矩阵遇到的兼容性问题
SVG transform矩阵遇到的兼容性问题.在chrome.safari.火狐.360极速浏览器上都正常显示的图,在手机端就不行啊!!! 先上图. 图1 PC端浏览器 图2 iPho ...
- 理解SVG坐标系统和变换： transform属性
SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...
- 使用 SVG transform rotate 解决画框中的数字跟随旋转的问题
问题描述 在图片上画框标注数字,旋转画布后,数字随之旋转,可读性不强,要求修改成无论画布怎么旋转,数字都是正向显示~ 原交互图示: 解决方案 先看下 dom 的结构 然后看下下面简单的代码 // 获取 ...
- D3之svg transform 与 css3 transform 区别与联系
D3就不用多介绍了,在数据可视化界属于大佬级别的js库.在这里主要想记录一下在写程序期间遇到的一个问题. 如下图所示,想完成主视图在小地图上的映射,小地图的白色矩形框用来代表当前主视图可见区域,主视图 ...
- SVG坐标系统
SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...
- 如何给SVG填充和描边应用线性渐变
给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...
- HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
随机推荐
- 使用nginx负载平衡
1. 介绍 在许多应用中,负载平衡是一种常用的技术来优化利用资源最大化吞吐量,减少等待时间,并确保容错. 可以使用nginx的作为一种非常高效的HTTP负载平衡器,将流量分配到多个应用服务器上提高性能 ...
- 网页被卷去的高： document.body.scrollTop;
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- AMQP协议学习
参考这个:http://kb.cnblogs.com/page/73759/ 写的挺好 AMQP协议是一种二进制协议,提供客户端应用与消息中间件之间异步.安全.高效地交互.从整体来看,AMQP协议可划 ...
- JQuery中的相反的地方
1.on和delegate的参数顺序相反 2.each和map参数也是相反的
- hibernate和ibatis的区别
通过别人的资料,进行自己关注的一些扼要点的整理 共同点: 1. 不同点:1. 自动化程度上,hibernate是全自动化的orm框架,提供了对象到数据库的完全映射和sql的内部自动生成,其对象映射是指 ...
- hibernate---一对一双向外键关联 (重要)
husband--wife: one to one 双向外键关联: 主导方: @OneToOne @JoinColumn(name="wifeId") 被主导方: @OneToOn ...
- Delphi XE7 Update1修正列表
Delphi XE7 Update1修正列表 官方下载地址:http://altd.embarcadero.com/download/radstudio/xe7/delphicbuilder_xe7_ ...
- SQL复习四（完整性约束）
完整性约束是为了表的数据的正确性.主要有主键,外键的约束. 1 主键 当某一列添加了主键约束后,该列的数据就不能重复出现.这样每行记录中其主键列就能唯一的标识着以行.如学生可以用学号作为唯一的标识. ...
- Spring自学教程-jabc编程详解、RowMapper使用(三)
一.JDBC 1.JDBC的编程特点 静态代码+动态变量 = jdbc编程.在spring中动态变量可以用注入的形式给予.这样的编程方式适合包装成模板.静态代码构成了模板,而动态变量则是需要传入的参数 ...
- 3D VR卡镜的使用方法
先把它展开 然后把它卡在手机中间 介绍一个VR游戏资源 Chair In a Room,这是一个立体沉浸式的3D游戏,原理是陀螺仪传感器随着手机转动可以观察整个三维房间 如图所示,点击进入,将两眼放到 ...