走进SVG_技术笔记

九州慕1372729 2021-11-12

平移
x、y都进行了2倍的缩放

顺序影响效果

记：如果在viewbox中➕0.5的偏移，那么下面的坐标，如果是对齐到整数的话，那坐标是比较锐利的

0赞 · 0采集
夜舞暗澜 2018-02-28

Tips： 1 给viewBox一个.5的偏移，整数坐标的线条会比较锐利

0赞 · 0采集
慕勒9991163 2018-02-23

svg引用：<use xlink：href="id" 可以调用界面上已经编写好的svg图形>

1赞 · 0采集
左小珍 2018-01-22

走进SVG 第二章 SVG中的坐标系统 2-5坐标变换定义 SVG中,[坐标变换]是对一个坐标系到另一个坐标系的变换的描述

截图
0赞 · 0采集
慕粉jason 2017-12-20

移动是相对于自身的坐标系方向进行平移，不是父坐标系，所以先选择再平移和先平移后旋转的结果是不一样的

截图
0赞 · 0采集
慕粉jason 2017-12-20

transform是从前驱坐标系到自身坐标系到转换

截图
0赞 · 0采集
隔壁大米 2017-11-03

旋转数学公式

截图
0赞 · 0采集
少不更事 2017-04-09

SVG 线性变换

截图
0赞 · 0采集
慕少8622884 2017-03-26

<script> function target() { return document.getElementById(group.value); } // 把变换命令转换为字符串 // 't 10 10 r 30 s 1.3' => 'translate(10, 10) rotate(30) scale(1.3)' function tc2ts(tc) { var arr = (tc || '').split(' '); var ts = ''; var elem, lastElemType; var cmd = { 't': 'translate(', 'r': 'rotate(', 's': 'scale(', 'm': 'matrix(' }; while ( elem=arr.shift() ) { if ( cmd[elem] ) { if ( lastElemType=='number' ) ts += ') '; ts += cmd[elem]; lastElemType = 'command'; } else { if ( lastElemType=='number' ) ts += ', '; ts += elem; lastElemType = 'number'; } } if ( ts.length ) ts += ')'; return ts; } group.oninput = function() { tc.value = target().tc || ''; ts.innerHTML = tc2ts(tc.value); }; tc.oninput = function() { target().tc = tc.value; target().setAttribute('transform', ts.innerHTML = tc2ts(tc.value)); }; </script>

0赞 · 0采集
慕少8622884 2017-03-26

<style media="screen"> svg{ background-color: #fcfcfc; display: block; margin: 20px auto; border: 1px solid #ccc; } #transform{ width: 300px; } </style>

0赞 · 0采集
慕少8622884 2017-03-26

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="-200.5 -100.5 1000 600"> <defs> <g id="coord"> <line x1="0" y1="0" x2="300" y2="0"/> <line x1="0" y1="0" x2="0" y2="300"/> <circle cx="0" cy="0" r="2"/> <circle cx="100" cy="0" r="2"/> <circle cx="200" cy="0" r="2"/> <circle cx="0" cy="100" r="2"/> <circle cx="0" cy="200" r="2"/> </g> </defs> <use xlink:href="#coord" stroke="black" fill="black"/> <text fill="black" x="5" y="20">World</text> <g id="a" stroke="red" fill="red"> <use xlink:href="#coord"/> <text x="5" y="20">a</text> <g id="b" stroke="blue" fill="blue"> <use xlink:href="#coord"/> <text x="5" y="20">b</text> <g id="c" stroke="green" fill="green"> <use xlink:href="#coord"/> <text x="5" y="20">c</text> </g> </g> <g id="d" stroke="pink" fill="pink"> <use xlink:href="#coord"/> <text x="5" y="20">d</text> </g> </g> </svg>

0赞 · 0采集
慕少8622884 2017-03-26

<fieldset> <legend>设置</legend> <label for="">分组： <select id="group"> <option value="a">a</option> <option value="b">┗b</option> <option value="c">   ┗c</option> <option value="d">┗d</option> </select> </label> <label for="">变换： <input type="text" id="tc" /> <span id="ts"></span> </label> </fieldset>

1赞 · 0采集
champ 2016-12-22

SVG 1像素的问题需要查阅

截图
0赞 · 0采集
Maeee 2016-10-24

2.5.1.坐标变换定义

截图
0赞 · 0采集
Maeee 2016-10-21

2.5.2.线性变换

截图
0赞 · 0采集
Maeee 2016-10-21

2.5.1.坐标变换定义

截图
0赞 · 0采集
Maeee 2016-10-21

2.5.坐标变换

截图
0赞 · 0采集
GavinLi_cn 2016-07-19

viewBox 设置.5可以使重叠线条变得锐利。

截图
0赞 · 1采集
学之舟_36820 2016-06-15

线性变换方程<br> X' = aX + cY + e<br> Y' = bX + dY + f<br> 变换矩阵<br> a c e<br> b d f<br> 0 0 1<br> <br> 例子-平移<br> 1 0 10<br> 0 1 10<br> 0 0 1<br> 每个坐标都加10<br> X' = 1*X + 0*Y + 10 = X + 10<br> Y' = 0*X + 1*Y + 10 = Y + 10<br> <br> 例子-旋转<br> 极坐标<br> X = r * cos(α)<br> Y = r * sin(α)<br> 经过旋转θ度后<br> X = r * cos(α+θ)<br> Y = r * sin(α+θ)<br> <br> X' = r*cos(α)cos(θ) - r*sin(α)sin(θ) = cos(θ)*X - sin(θ)*Y + 0<br> Y' = r*cos(α)sin(θ) + r*sin(α)cos(θ) = sin(θ)*X + cos(θ)*Y + 0<br> <br> 旋转30度<br> cos(30) -sin(30) 0<br> sin(30) cos(30) 0<br> 0 0 1<br> <br> 缩放<br> a和c直观控制<br> 2 0 0<br> 0 2 0<br> 0 0 1 注意：多次变换中，第一次变换基于前驱坐标系，而后变换基于自身坐标系

截图
0赞 · 1采集
小橙子cc 2016-04-18

旋转原理

截图
0赞 · 1采集
阿庆web 2016-04-11

加上0.5的便宜。。会比较锐利图像

截图
0赞 · 0采集
Bestcode 2015-11-10

多次变换中，第一次变换基于前驱坐标系，而后变换基于自身坐标系

0赞 · 2采集
梭梭 2015-11-09

use标签引用图像

截图
0赞 · 1采集
梭梭 2015-11-09

有0.5的线条更锐利

截图
0赞 · 2采集
梭梭 2015-11-09

多个变换，后面的变换基于第一个变换后的自身坐标系

截图
0赞 · 0采集
小陆豪客02 2015-09-04

svg中渲染一像素的问题，在viewbox中设置.5，线条变锐利

0赞 · 2采集
timelikesong 2015-09-03

线性变换

截图
0赞 · 2采集
小陆豪客02 2015-09-01

新标签，defs,use,重用

截图
0赞 · 0采集
慕后端4851235 2015-08-12

坐标变换：数学中：采用数学方法，将一个坐标系中的坐标变换为另一个坐标系的过程； SVG中：对一个坐标系到另一个坐标系的变换的描述；

截图
0赞 · 0采集
饭太咸了 2015-08-04

transform属性

截图
0赞 · 0采集

数据加载中...