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使用的更多相关文章

  1. Snap.svg中transform旋转值的“r+数组”表现形式

    Snap.svg中transform的值还可以写为类似以下这种形式: transform:'r'+[100,[50,50]]; 这种写法的意思是,让元素以(50,50)为旋转中心点,然后旋转100度. ...

  2. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. SVG中 transform矩阵遇到的兼容性问题

    SVG  transform矩阵遇到的兼容性问题.在chrome.safari.火狐.360极速浏览器上都正常显示的图,在手机端就不行啊!!! 先上图. 图1     PC端浏览器 图2   iPho ...

  4. 理解SVG坐标系统和变换： transform属性

    SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...

  5. 使用 SVG transform rotate 解决画框中的数字跟随旋转的问题

    问题描述 在图片上画框标注数字,旋转画布后,数字随之旋转,可读性不强,要求修改成无论画布怎么旋转,数字都是正向显示~ 原交互图示: 解决方案 先看下 dom 的结构 然后看下下面简单的代码 // 获取 ...

  6. D3之svg transform 与 css3 transform 区别与联系

    D3就不用多介绍了,在数据可视化界属于大佬级别的js库.在这里主要想记录一下在写程序期间遇到的一个问题. 如下图所示,想完成主视图在小地图上的映射,小地图的白色矩形框用来代表当前主视图可见区域,主视图 ...

  7. SVG坐标系统

    SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...

  8. 如何给SVG填充和描边应用线性渐变

    给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...

  9. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

随机推荐

  1. js中：Date.utc()方法与getTime()方法返回值不相等的原因

    // Date.UTC() 方法接受的参数同日期构造函数接受最多参数时一样,返回从1970-1-1 00:00:00 UTC到指定日期的的毫秒数. var utcDate = Date.UTC(201 ...

  2. 使用Jetty搭建Java Websocket Server，实现图像传输

    https://my.oschina.net/yushulx/blog/298140 How to Implement a Java WebSocket Server for Image Transm ...

  3. FIR数字滤波器的设计要点

    源:http://blog.sina.com.cn/s/blog_493520900101gt0a.html FIR数字滤波器的设计要点

  4. Bessie Goes Moo

    Bessie Goes Moo 题目描述 Farmer John and Bessie the cow love to exchange math puzzles in their free time ...

  5. Moocryption

    Moocryption 题目描述 Unbeknownst to many, cows are quite fond of puzzles, particularly word puzzles. Far ...

  6. springMVC 多方法controller

    1. 新建web project 2. 加入jar包 3. 写web.xml <?xml version="1.0" encoding="UTF-8"?& ...

  7. 使用SQLServer2005插入一条数据时返回当前插入数据的ID

    使用SQLServer2005插入一条数据时返回当前插入数据的ID 在执行完插入后 再执行 select @@identity from users 就OK 就是刚才插入的那行的 ID了 补充: @@ ...

  8. iOS AFN向接口端传递JSON数据

    NSDictionary *body = @{@"snippet": @{@"topLevelComment":@{@"snippet":@ ...

  9. iOS开发——应用图标上显示消息数量

    iOS8以前: UIApplication *app = [UIApplication sharedApplication]; app.applicationIconBadgeNumber = num ...

  10. Linux 软件包安装管理

    转自:http://www.cnblogs.com/Quains/archive/2012/01/03/2311049.html 本文主要是记录下RedHat系列的软件包管理. 内容分为以下三个部分: ...