D3.js关于SVG(2) 最后更新时间：2021年03月18日 ## SVG转化 SVG引入了一个新属性，transform为支持转换。可能的值是以下一项或多项。 - Translate - 它有两个选项， tx沿x轴平移， ty沿y轴平移。 - Rotate - 它有三个选项， angle指旋转角度， cx和cy指的是x和y轴旋转的中心。 如果未指定cx和cy ，则默认为坐标系的当前原点。 - Scale - 它有两个选项， sx沿x轴的比例因子， sy沿y轴的比例因子。 这里， sy是可选的，如果没有指定，则它取sx的值。元素的长宽属性值与sx和sy的值相乘。 - Skew (SkewX and SkewY) - 只需一个选项; skew-angle指的是SkewX沿x轴的角度和SkewY沿y轴的角度。这个属性可以拆分为skewX和skewY。注意的是，X和Y需要大写 ### 示例一（translate）： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <svg width = "210" height = "210"> <rect x="10" y="10" width="20" height="20" fill="red" transform="translate(100,100)"></rect> </svg> </body> </html> ``` 代码实际效果如下： <svg width = "210" height = "150"><rect x="0" y="0" width="20" height="20" fill="red" transform="translate(100,100)"></rect></svg> 可以明显看出，矩形的位置在（100,100）这个地方。 ### 示例二（rotate）： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <svg width = "210" height = "110"> <rect x="20" y="20" width="20" height="20" fill="red" transform="rotate(50 20 20)"></rect> </svg> </body> </html> ``` 代码实际效果如下： <svg width = "210" height = "110"><rect x="20" y="20" width="20" height="20" fill="red" transform="rotate(50 20 20)"></rect></svg> 可以明显看出，矩形在（20,20）位置，围绕（20,20）这个点旋转了50度。 ### 示例三（scale）： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <svg width = "210" height = "80"> <rect x="0" y="0" width="20" height="20" fill="red" transform="scale(11,1.2)"></rect> </svg> </body> </html> ``` 代码实际效果如下： <svg width = "210" height = "80"><rect x="0" y="0" width="20" height="20" fill="red" transform="scale(11,1.2)"></rect></svg> 原本长宽都为20的矩形，设置scale后，width实际值变为了11*20=220，height实际值变为了20*1.2=24。 ### 示例四（skew）: ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <svg width = "210" height = "210"> <rect x="0" y="0" width="40" height="40" fill="red" transform="skewX(20)"></rect> </svg> </body> </html> ``` 代码实际效果如下： <svg width = "210" height = "210"><rect x="0" y="0" width="40" height="40" fill="red" transform="skewX(20)"></rect></svg> 可以看出，图形变成了平行四边形。 ## 使用d3.js进行svg转换 步骤如下： （1）创建一个容器来保存SVG图像。 （2）创建svg图像。 （3）用attr方法为图像添加transfrom属性。 （4）为transfrom属性设置相应的转换效果。 示例： ```html <html> <head> <script src = "https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"> </div> <script> var width = 210; var height = 210; var o = d3.select("#one"); var s = o.append("svg").attr("width",width).attr("height",height); var c = s.append("circle"); c.attr("r",10) .attr("fill","red") .attr("transform","translate(100,100) scale(5) skewX(10)") ; </script> </body> </html> ``` 示例中，在div容器中添加了一个圆形svg图像，并对圆形进行了移动，比例和沿角度拉扯的效果。
Comments | NOTHING