SVG之transform

最新推荐文章于 2024-05-16 09:13:08 发布
最新推荐文章于 2024-05-16 09:13:08 发布
阅读量470 收藏 1
点赞数
原文链接：https://segmentfault.com/a/1190000009248258
版权

svg的形变和css的形变用的都是transform，而且属性也几乎没差(是几乎)。

translate

transform="translate(x-value, y-value)"

简单来说，就是偏移。沿x轴方向偏移x-value个单位长度，沿y轴方向偏移y-value个单位长度。

<symbol id="rect">
    <line x1="0" y1="0" x2="300" y2="0" stroke="grey"></line>
    <line x1="0" y1="0" x2="0" y2="150" stroke="grey"></line>
    <rect x="20" y="20" width="50" height="50"></rect>
</symbol>
<use xlink:href="#rect" stroke="grey" fill="none"></use>
<use xlink:href="#rect" transform="translate(100,50)" stroke="black" fill="none"></use>

clipboard.png

复杂来说，svg处理偏移的时候，其实是对元素所在的坐标系做整体偏移。那上面例子来说，#rect内的所有元素在偏移后，坐标数值没有变化，两条代表坐标轴线的直线起始位置还是(0,0)。只是这个(0,0)所在的坐标系已经被偏移到了原坐标系的(100,50)位置。

scale

transform="scale(x-value, y-value)"

简单来说，就是缩放。x轴方向上的长度变为原来的x-value倍，y轴方向上的长度变为原来的y-value倍。允许只有一个参数scale(n)，表示x和y轴方向上的长度同时变为原来的n倍。

<line x1="0" y1="0" x2="150" y2="0" stroke="grey"></line>
<line x1="0" y1="0" x2="0" y2="150" stroke="grey"></line>
<symbol id="rect">
    <rect x="20" y="20" width="50" height="50" stroke-width="5"></rect>
</symbol>
<use xlink:href="#rect" stroke="grey" fill="none"></use>
<use xlink:href="#rect" transform="scale(2,2)" stroke="black" fill="none"></use>

clipboard.png

复杂来说，缩放的并不是元素本身的长度，而是原来的单位长度。上例中的正方形不仅自身变大了一倍，而且发生了偏移。就是说，rect所有的属性值都变成了原来的2倍，包括作为起点坐标的x和y、作为宽度长度的width和height，还有作为线条粗细值得stroke-width。

rotate

transform="rotate(angle,[centerX, centerY])"

默认以坐标系中(0,0)原点为圆心，顺时针旋转angle度。0度为水平从左向右方向。

clipboard.png

<line x1="0" y1="0" x2="200" y2="0" stroke="grey"></line>
<line x1="0" y1="0" x2="0" y2="200" stroke="grey"></line>
<symbol id="rect">
    <polygon points="50 10, 100 10, 150 60, 100 60"></polygon>
</symbol>
<use xlink:href="#rect" stroke="grey" fill="none"></use>
<use xlink:href="#rect" transform="rotate(45)" stroke="black" fill="none"></use>

clipboard.png

rotate的第二和第三个参数为可选参数，用于指定旋转中心坐标，默认即为0,0。所以如果向让某个元素围绕自己的中点旋转，只要以它的中点坐标的x和y值作为第二和第三个参数即可。

<line x1="0" y1="0" x2="150" y2="0" stroke="grey"></line>
<line x1="0" y1="0" x2="0" y2="150" stroke="grey"></line>
<symbol id="rect2">
    <rect x="50" y="50" width="50" height="50"></rect>
</symbol>
<use xlink:href="#rect2" stroke="grey" fill="none"></use>
<use xlink:href="#rect2" transform="rotate(45, 75, 75)" stroke="black" fill="none"></use>

clipboard.png

skewX和shewY

transform="skewX(angle) skewY(angle)"

skewX和shewY可以使x轴和Y轴歪斜

<line x1="0" y1="0" x2="300" y2="0" stroke="grey" stroke-dasharray="5 5"></line>
<line x1="0" y1="0" x2="0" y2="200" stroke="grey" stroke-dasharray="5 5"></line>

<g transform="skewX(45)" stroke-width="10" stroke="grey">
    <line x1="0" y1="0" x2="100" y2="0" ></line>
    <line x1="0" y1="0" x2="0" y2="100"></line>
    <text x="0" y="110" stroke-width="1" stroke="black">skewX</text>
</g>
<g transform="translate(175) skewY(45)" stroke-width="10" stroke="grey">
    <line x1="0" y1="0" x2="100" y2="0"></line>
    <line x1="0" y1="0" x2="0" y2="100"></line>
    <text x="0" y="110" stroke-width="1" stroke="black">skewY</text>
</g>

clipboard.png

直观感受是，用了skewX，变歪的却是y轴。我觉得可以这么理解，上例中代表y轴直线起始位置的(0,0)和结束位置的(0,100)两个坐标，x轴坐标没有改变，但形成的直线却不是一条笔直的竖线。被歪斜过后的坐标(0,100)位置处于原坐标系中(100,100)的位置，被歪斜的是x的坐标。
书里没提歪斜角度的问题，简单做了几个demo，得出的结论还挺简单的（不知道是不是因为简单所以书里懒得写了。。。所以想了想也不写了，自己做demo试试看就懂了，角度可以是负数，可以超过90度）

形变的次序

transform="translate(100,100) scale(2)"和transform="scale(2) translate(100,100)"形变后的结果是否完全一致？
如果弄清楚了“复杂来说”的transform和scale，应该不难得出结论。

<svg height="300" width="300">
    <line x1="0" y1="0" x2="200" y2="0" stroke="grey"></line>
    <line x1="0" y1="0" x2="0" y2="150" stroke="grey"></line>

    <symbol id="rect">
        <rect x="20" y="20" width="50" height="50"></rect>
    </symbol>
    <use xlink:href="#rect" stroke="grey" fill="none"></use>
    <use xlink:href="#rect" transform="translate(50,25) scale(2)" stroke="black" fill="none"></use>
</svg>
<svg height="300" width="300">
    <line x1="0" y1="0" x2="300" y2="0" stroke="grey"></line>
    <line x1="0" y1="0" x2="0" y2="150" stroke="grey"></line>

    <symbol id="rect">
        <rect x="20" y="20" width="50" height="50"></rect>
    </symbol>
    <use xlink:href="#rect" stroke="grey" fill="none"></use>
    <use xlink:href="#rect" transform="scale(2) translate(50,25)" stroke="black" fill="none"></use>
</svg>

clipboard.png

transform="translate(50,25) scale(2)"是先将rect所在坐标系的原点偏移至(50,25)，再将单位长度放大两倍，等同于在原坐标中画这样一个正方形：

<rect x="50+2*20" y="25+2*20" width="2*50" height="2*50" stroke="black" fill="none"></rect>(将计算结果代入即可运行)

transform="scale(2) translate(50,25)"是先将单位长度放大两倍，再将rect所在坐标系原点偏移至放大后坐标系的(50,25)，等同于：

<rect x="2*(50+20)" y="2*(25+20)" width="2*50" height="2*50" stroke="black" fill="none"></rect>(将计算结果代入即可运行)

所以再使用联合形变的时候，顺序弄错导致的结果就会出问题。

一些技巧

rotate可以设置旋转中心坐标，可是scale却没有，如何让scale也能按设置的坐标为中心缩放？
没错，就是位移+缩放，translate+scale。先位移还是先缩放，理论上都行。
先位移的情况下，位移计算公式：

translate(-centerX*(factor-1), -centerY*(factor-1))
scale(factor)

先缩放的情况下，位移计算公式：

scale(factor)
translate(-centerX*(factor-1)/factor, -centerY*(factor-1)/factor)

明显前者比较好用，后者容易除不尽嘛。

<line x1="0" y1="0" x2="300" y2="0" stroke="grey"></line>
<line x1="0" y1="0" x2="0" y2="150" stroke="grey"></line>
<circle cx="75" cy="75" r="1" style="fill: black;"></circle>
<g id="box" style="stroke: black; fill: none;">
   <circle cx="75" cy="75" r="15" stroke="grey" fill="none"></circle>
</g>
<use xlink:href="#box" transform=" translate(-75,-75) scale(2)" style="stroke-width: 0.5;"></use>
<use xlink:href="#box" transform=" translate(-112.5,-112.5) scale(2.5)" style="stroke-width: 0.4;"></use>
<use xlink:href="#box" transform=" translate(--150,-150) scale(3)" style="stroke-width: 0.33;"></use>

clipboard.png

css之transform

css中提供了一套与svg形变一致的transform属性

  • transform:translate(x, y)

  • transform:scale(x, y) / scaleX(x) / scaleY(y)

  • transform:rotate(deg)

  • transform:skew(xdeg, ydeg) / skewX(deg) / skewY(deg)

  • transform:matrix(a,b,c,d,e,f)

一个DOM元素只允许有一个transform属性，所以当多种形变同时作用于一个DOM元素时，可以这样写：

transform:translate(100px, 100px) scale(1, 0.5) rotate(45deg)

需要注意两点，

  1. 与svg一样，形变是有次序的。

  2. 与svg不同，数值后需要指定单位。

最后一个Matrix形变矩阵，功能强大，一个属性实现所有形变。
关于变形矩阵，张鑫旭的一片文章写得通俗又详细，推荐看这篇http://www.zhangxinxu.com/wor...

关于matrix这里就不再多写了。但有几点需要补充

  1. css的transform利用translate+scale也是可以实现镜像对称的，不是非matrix不可。可以说，maxtrix可以实现的形变，利用translate+scale+rotate+skew同样可以实现。对于复杂的形变，不管用哪种方式都离不开计算，但万变不离其宗，理解形变的本质是改变坐标体系，剩下的就看数学功底如何了。

  2. 关于用matrix实现和rotate一样的旋转，公式有些费解，靠死记硬背我是一会儿就忘了，花一点点篇幅记录下。先上张图
    clipboard.png

将图像顺时针旋转θ，等价于将整个坐标系旋转-θ。如图所示，原坐标点A在原坐标系X,Y中的坐标为(x,y)，经过顺时针旋转后，点A相当于位于逆时针旋转θ后的坐标系X',Y'中。所以结果相当于求点A在新坐标系X',Y'中的坐标。这样一来就简单了，利用0x和0y作为斜边即可得出新坐标：

x' = cosθ\*x + sinθ\*y
y' = sinθ\*y - cosθ\*x
weixin_34137799
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
svg规范关于transform属性的说明
吴海勇专栏
10-01 7335
在将svg图形格式转化为其它格式图形的工作中，坐标变换是首当其冲的一件工作，下面我们结合svg规范看看svg是如何处理坐标变换的，理解了这些，再将其转化成你想要的图形格式的变换方式也就不困难了。1.svg采用的初始坐标系统是视图坐标系，即屏幕左上角为左边原点，y轴正方向朝下，x轴正方向朝右2.The value of the transform attribute is a , which i
理解SVG坐标系统和变换： transform属性
weixin_33973600的博客
08-05 639
SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。 这是我写的SVG坐标系统和变换部分的第二篇。在第一篇中，包括了任何要理解SVG坐标系统基础的需要知道的内容；更具体...
Svg学这些就够了-transform（二）
eaziyytt的专栏
02-26 1878
上一节《Svg学这些就够了-组合复用（一）》我们学习了svg的组合复用，一次定义就可以在图中任意引用了，不过如果只是简单引用未免太就小看svg的功能了，再组合复用的基础上，我们本节详细介绍下svg的transform属性功能，这个属性非常强大。 tranform属性用来对一个元素声明一个或多个变换。它输入一个带有顺序的变换定义列表的<transform-list>值。每个变换定义由空格或逗号隔开。有效地SVG变换有：平移、缩放、旋转,、倾斜。transform属性中使用的变换函数类似于C.
SVG 学习笔记之 transform 属性
985小菜鸡
06-02 828
变换函数指定围绕给定点 (x, y) 旋转 a 度。如果未提供可选参数 x 和 y，则旋转围绕当前用户坐标系的原点进行。transform 属性定义了一个转换定义列表，这些转换定义应用于一个元素和该元素的子元素。转换函数通过 x 和 y 指定缩放操作。如果未提供 y，则假定它等于 x。变换函数将对象移动 x 和 y。如果未提供 y，则假定其为 0。变换函数指定沿 x 轴进行 a 度的倾斜变换。变换函数指定沿 Y 轴进行 a 度的倾斜变换。变换函数以六个值的变换矩阵的形式指定变换。
15.SVG变形 Transform
最新发布
一名全栈开发工程师
05-16 634
SVG的transform属性非常强大，它允许你对图形进行平移、缩放、旋转、倾斜等操作。以下是一篇关于SVG图形变形的教程，包括详细的描述和代码示例。
svg-transform
04-27
var transform = require ( 'svg-transform' ) ; transform ( [ { translate : [ 10 , 20 ] } ] ) ; // === 'translate(20, 10)' transform ( [ { scale : 20 } , { translate : [ 20 , 10 ] } ] ) ; // === 'scale...
svg-transform-parser:在 Javascript 中解析 SVG 变换属性
06-08
svg 转换解析器在 Javascript 中解析 SVG 转换安装 npm install svg-transform-parser用法 var parseSvgTransform = require('svg-transform-parser').parse;parseSvgTransform("translate(10,20)");// {translate: ...
SVG基本图形元素.pdf
08-05
SVG图形元素的强大之处在于它们可以根据需要进行组合、嵌套和动画化，这使得SVG成为现代Web开发中的重要工具，尤其在响应式设计和交互式用户体验方面。通过掌握这些基本元素及其属性，开发者可以构建出复杂的图形和...
SVG实现时钟效果
10-18
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，广泛用于网页设计和各种矢量图形的应用。SVG具有体积小、可缩放、兼容性好等特点，支持图形的动态生成和交互操作。本次所讲的SVG实现时钟效果，主要是...
svg 画流程图
12-28
这种实现方式需要对SVG元素的`transform`属性进行操作，它可以控制元素的平移、旋转和缩放。 修改流程图则涉及到对元素属性的动态调整。例如，用户可以改变矩形的大小、圆形的半径或文本的文本内容。这可以通过监听...
three.js中svg拉伸体的转换函数transformSVGPathExposed
11-28
在vue中使用three.js的svg拉伸体的转换函数transformSVGPathExposed
SVG的Transform使用
weixin_34192732的博客
01-04 202
SVG的Transform使用： &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getS...
SVG的transform
香蕉你个芭呐呐的博客
10-22 2968
svg  　transform
SVG transform
weixin_30467087的博客
03-02 540
【转】 SVG 学习<六> SVG的transform SVG元素也有transform属性，位移、缩放、倾斜、旋转。 这次一次性把代码都贴出来算了。 HTML代码 <svg xmlns="http://www.w3.org/2000/svg"> <rect class="No1" /> <r...
svg的transform-matrix详解
zp19860529的博客
02-27 4648
一、svg transform的种类 translate（平移） skew（倾斜） rotate（旋转） scale（缩放） matrix（矩阵操作，可涵盖前四者，威力十分强大） 二、用matrix表达前三者 matrix接口样式：matrix(a,b,c,d,e,f) 对应矩阵： a c e b d f 0 0 1 1.Translate(tx, ty) 矩阵： 1 0 tx 0 1 ty 0 0 1 写法：matrix(1,0,0,1,tx,ty) .
理解SVG transform坐标变换
細水、長流√的专栏
12-23 1886
一、HTML transform和SVG transform SVG中自带transform属性，没错，是属性，例如： <svg width="200" height="150"> <rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect> </svg> 普通的HTML元素没有transform属性，但是支持CSS3的transform, 好奇的小伙伴可能
svg的transform属性
konglingyuan的专栏
08-30 1197
transform属性指定了一组转换定义，这些指定的转换可以被应用到一个元素及其子元素上。这组转换被空格或者逗号隔开，被从右到左被应用。 transform定义的类型：    matrix(a,b,c,d,e,f):该转换由一个六个参数构造的矩阵指定，matrix(a,b,c,d,e,f)与使用转换矩阵 的效果一致。即从一个新的坐标系映射到原先的坐标系，映射函数如下：
SVG的座标变换transform
java_veilman的专栏
07-27 736
这几天用svg画图，发现svg的座标变换有些复杂。 这里有一个例子，在将原始座标系转为用户座标系时比较有用。 记录下来： 1.蓝色为原始svg座标系；原点为左上角，x正方向向右， y正方向向下； 2.经过变换，<g transform="translate(0,200) scale(1,-1)">，用户座标系为红色部分，原点可以看成是左下角。 3.图中绿色，与黄色的矩形...
svg transform 坐标变换方式
wujingwen1111的专栏
03-17 2571
转自：http://xofun.iteye.com/blog/1689597 svg transform 坐标变换方式  坐标变换的使用方式：  代码:      ...  1、平移变换（translate）  平移表达式transform="translate(x,y)"，即新坐标系的原点在原坐标系的（x,y）处。坐标轴的方向不变。  2、旋转变换（rotate）  tr
Svg 动画 transform scale
05-21
SVG动画中可以使用transform属性来实现缩放动画。可以在SVG元素中设置transform属性，其中scale()函数可以用来实现缩放。scale()函数接受两个参数，分别表示横向和纵向的缩放比例。例如，设置transform属性为`transform="scale(1.5)"`表示将元素放大1.5倍，而`transform="scale(0.5, 1.2)"`则表示将元素在横向缩小一半，在纵向放大1.2倍。在动画中可以通过设置不同的缩放比例来实现元素的缩放动画，例如： ``` <svg> <rect x="50" y="50" width="100" height="100"> <animate attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="1s" fill="freeze" /> </rect> </svg> ``` 这段代码将一个矩形元素从原始大小（scale(1)）缩放到2倍大小（scale(2)），动画时长为1秒。其中，attributeName属性指定要动画的属性为transform，attributeType属性指定动画属性的类型为XML，type属性指定动画类型为scale，from属性指定起始缩放比例为1，to属性指定结束缩放比例为2，dur属性指定动画时长为1秒，fill属性指定动画结束后保持缩放状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值