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. 配置nova instances使用NFS后端

    首先先使用“nova delete”命令删除所有实例,释放磁盘空间. 停止nova服务:service libvirtd stopservice openstack-nova-compute stop ...

  2. android学习之-Theme和Style

    android学习之-Theme和Style 分类: android 2013-10-11 15:01 960人阅读 评论(0) 收藏 举报 android style和theme的使用. style ...

  3. zepto学习之路--源代码提取

    最近在看zepto的源代码,把一些有用的函数摘出来,看看zepto是怎么实现的,自己做的时候也可以用.说实话,zepto的实现有一些看起来还是很晦涩的,可能是自己的水平不够,看不透作者的真正的意图. ...

  4. js正则之零宽断言

    我们学到的正则表达式匹配,都是有“宽度”的,使用 \w+. 匹配下面文本,会将 . 一同匹配: regular. expression. 如果不想匹配符号,只匹配一个位置,就要用到“零宽断言”(匹配宽 ...

  5. Freemodbus介绍及测试

    Freemodbus 1.5 Freemodbus文档1:模块 Freemodbus文档2:寄存器 Freemodbus文档3:配置 Freemodbus文档4:工具函数 Freemodbus文档5: ...

  6. C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll，提示找不到指定模块

    在公司用的联想 ThinkPad T430i,原装配置及系统,开机巨慢.按下开机键到登陆界面超过1分钟,再到桌面这个时间就难说了,多时有超过3分钟,进入桌面还要等待几分钟才能正常操作.新年过来向公司领 ...

  7. ssl通信c实现

    /*File:client.c *Auth:sjin *Date:2014-03-11 * */ #include <stdio.h>#include <string.h>#i ...

  8. 搭建git服务器及利用git hook自动布署代码

    注意:服务器:Ubuntu Server 14.04,我的项目比较小,所有操作都使用root,建议最好新建一个用户(需要有管理员权限,否则在后面使用hooks自动部署代码时会出现各种权限问题,很蛋疼的 ...

  9. Ibatis 3.0 之前使用的都是2.0 3.0与2.0的内容有很大的不同

    以前用过ibatis2,但是听说ibatis3有较大的性能提升,而且设计也更合理,他不兼容ibatis2.尽管ibatis3还是beta10的状态,但还是打算直接使用ibatis3.0, ibatis ...

  10. openstack名称发音收集

    MariaDB:    maria['mɛərɪr] Corosync:    coro[kə'roʊ]    sync[sɪŋk] pacemaker:    [ˈpesˌmekɚ] galera: ...