svg基础变形: transform 之 translate
本帖最后由 马黑黑 于 2023-11-16 23:51 编辑 <br /><br /><style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.bblue { color: blue; }
.zs { color: green; }
.ma pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.ma svg { border: 1px solid gray; }
.flex { display: flex; gap: 8px; align-items: center; }
</style>
<div class="ma">
<h2>svg基础变形: transform 之 translate</h2>
<p>和HTML的CSS变形一样，svg也是通过transform属性达成元素的基础变形，主要有如下几种方式：平移（translate）、旋转（rotate）、伸缩（scale）和扭曲（skewX、skewY）。svg的变形属性可用于实体元素，也可用于像 g、pattern、symbol 这样的集合元素。本节仅介绍变形（transform）中的平移（translate）。</p>
<p>先看如下代码：</p>
<pre>
<svg width="200" height="100" style="border: 1px solid gray;">
<rect <span class="bblue">x="10" y="10" width="40" height="40"</span> fill="olive" />
<rect <span class="bblue">x="10" y="10" width="40" height="40"</span> <span class="rred">transform="translate(150,50)"</span> fill="navy" />
</svg>
</pre>
<p>以上代码，在 200*100 的svg画布内，绘制了两个矩形，矩形的宽高尺寸一致，定位一致，但第二个海军蓝矩形设置有 transform 属性，<span class="rred">transform="translate(150,50)"</span>，根据设置，它应移动到svg右下角。请看效果：</p>
<svg width="200" height="100" style="border: 1px solid gray;">
<rect x="10" y="10" width="40" height="40" fill="olive" />
<rect x="10" y="10" width="40" height="40" transform="translate(150,50)" fill="navy" />
</svg>
<p>svg的transform属性中，平移 translate 参数的设置原理与CSS一致，都是设置 （x,y）平移坐标值，只是svg默认不要单位，默认为像素（CSS必须使用px单位）。同时，和CSS设置的平移一样，简写的svg平移，例如，translate(100)，表示水平移动100px、垂直移动0px。</p>
<p>svg变形中的平移应该是非常简单的，但必须弄清它和CSS的异同：① svg translate 参数值不要单位是默认为px；② svg translate 参数可以简写，简写时和CSS原理一致；③ svg translate 参数如果需要同时设置XY坐标平移值，总是使用全写方式，即 translate(x,y)，CSS则可以单独设置 translateX 或 translateY。 </p>
</class>
沙发座着感觉看起来会不会理解更加清楚一点{:4_170:} 反正不够系统的学习就是一知半解 小辣椒 发表于 2023-11-16 20:55
沙发座着感觉看起来会不会理解更加清楚一点
站着看好理解 小辣椒 发表于 2023-11-16 20:58
反正不够系统的学习就是一知半解
这些都是基本的东东，炫酷的效果，依靠它们 加分分。 樵歌 发表于 2023-11-17 09:44
加分分。
感谢支持 原来translate只写一个数值的时候，相当于translateX，这个在学习css的时候都没注意到呢，在这个里面学习到了{:4_173:} 我记得有些设置只写一个数值的时候，意味着xy的值相同，所以简写。
这个看样子要单独记一下呢。 感谢黑黑的讲解，学习了{:4_187:} 红影 发表于 2023-11-17 20:09
我记得有些设置只写一个数值的时候，意味着xy的值相同，所以简写。
这个看样子要单独记一下呢。
不同的属性，不同的规范 红影 发表于 2023-11-17 20:08
原来translate只写一个数值的时候，相当于translateX，这个在学习css的时候都没注意到呢，在这个里面学习到 ...
{:4_190:} 马黑黑 发表于 2023-11-17 21:33
不同的属性，不同的规范
是的，这个必须单独记一下的。 马黑黑 发表于 2023-11-17 21:34
今天看到的 scale就是当 y 缺省时，y = x 。 红影 发表于 2023-11-18 10:26
今天看到的 scale就是当 y 缺省时，y = x 。
是的 红影 发表于 2023-11-18 10:24
是的，这个必须单独记一下的。
也不怎么复杂的 马黑黑 发表于 2023-11-18 10:42
是的
这样对照着，更清楚了。 马黑黑 发表于 2023-11-18 10:42
也不怎么复杂的
是的，这个只是比较特殊，并不复杂。 红影 发表于 2023-11-18 14:22
是的，这个只是比较特殊，并不复杂。
{:4_181:} 红影 发表于 2023-11-18 14:21
这样对照着，更清楚了。
那就好
页:
[1]
2