使用JavaScript获取变形SVG的当前坐标 [英] Getting current coordinates for a morphing svg with javascript

查看：103 发布时间：2020/6/8 18:39:14 javascript animation svg morphing anime.js

本文介绍了使用JavaScript获取变形SVG的当前坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试采用一条随用户鼠标移动而变化的svg路径，并在用户单击按钮时将其扩展为稳定的矩形。当前项目在这里（请注意，这是从codrops演示中进行的一些更改）：

我们设置贯穿文档中心
和定位点的水平和垂直参考线。在下图中，这些是
蓝线。

在它们上，我们将在拖动节点时进行导航。在工具选项板中，选择多边形

将光标置于文档的中心并绘制一个五边形

选择菜单：轮廓/ Ocontur对象（Shift + Ctrl + C）

我们以* .svg格式保存文件，但编辑器不会关闭

从文件的整个代码中，我们只需要一行属性 d = m ..z

< path d = m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z />

返回到Inkscape，选择工具-编辑轮廓节点，
并拖动节点以形成正方形

再次，保存文件并复制d =属性的新值 m
..
我们需要将得到的值替换为变量值= ..

  values = m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z; 
 m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z

下面是实现动画的代码，分号将正方形和五边形的路径值分开。平滑地将一个图形转换为另一个图形：

单击svg时开始动画

 < svg id = svg2 width = 400 height = 400 viewBox = 0 0 400400 id =  svg2 version = 1.1>< g id = layer1 transform = translate（0，-652.36216） style = fill：yellowgreen; stroke-width：3; stroke：dodgerblue><路径d = m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z>< animate attributeName = d begin = svg2.click dur = 6s fill = fr eeze repeatCount = 1 restart = whenNotActive values = m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z; m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z /< / path>< / g< / svg>

其中

< animate attributeName = d -动画命令属性'd'

begin = svg2.click -单击svg时开始动画

dur = 6s -动画持续时间6秒

fill = freeze -动画结束后，图形冻结在其最终位置

repeatCount = 1 -单次重复

重启= whenNotActive -禁止动画重新启动直到完成

相同技术的更复杂示例

动画工具提示，箭头处带有缺口

从Inkscape中制作的svg文件中复制补丁空白工具提示

  < svg version = 1.1 viewBox = 0 0 240 240> <路径d = m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z style = fill：＃0391FD; stroke-linecap：round; stroke-linejoin：round; />< / svg>

通过拖动节点来更改工件工具提示的形状

再次从新的svg文件Inkscape复制补丁

 < svg id = svg1 version = 1.1 viewBox = 0 0 240 240> ; < path d = m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z style = fill：＃0391FD; stroke-linecap：round; stroke-linejoin：round;笔画不透明度：0.4；笔画：＃0391fd /> < / svg>

像在第一个示例中一样，我们使动画的属性为
，补丁为 d

  body {背景：url（'http://badumka.ru/images/1523569_krasochnaya-priroda.jpg'）不重复背景尺寸：封面；高度：100％;宽度：100％;溢出：隐藏；}。bdiv {显示：表格；}。容器{位置：相对；宽度：500像素； margin：0 auto;}

 < div class = bdiv> < div class = container> < svg id = svg1 version = 1.1 xmlns：svg = http://www.w3.org/2000/svg xmlns = http://www.w3.org/2000/svg viewBox = 0 0 240 240> < g transform = scale（0.8）> <路径d = m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z style = fill：dodgerblue; stroke-linecap：round; stroke-linejoin：round; fill-透明度：0.5英寸> < animate id = an_path attributeName = d values = m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7。 7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0 -50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0- 5.5-4.5-10-10-10z begin = svg1.click dur = 8s repeatCount = 1 fill = freeze>< / animate> < / path> < text x = 30 y = 50 font-size = 18 fill = white>点击我< / text> < / g> < / svg> < / div>< / div>

动画化补丁的属性 d是一个非常强大有效的工具，可让您实施各种转换。

掌握并理解了手动制作SVG形状动画的方法，使用库JS要容易得多。

I am attempting to take an svg path that is morphing in response to the user's mouse movements and expand it into a stable rectangle when the user clicks a button. The current project is here (please note that this is taken from a codrops demo with a few alterations): https://codepen.io/redheadedmandy/pen/RjBKeQ

Assuming that there is a way to call the current coordinates of the SVG, I figured I would do the following on the click of the button:

var currentPoints = ; // insert current path here

var clickMorph = anime({
    targets: '.morpho',
    d: [
        {currentPoints},
        {value: ''} // I also need to figure out what the best way to morph it into a retangle is... 
    ],
    easing: 'easeOutQuad',
    duration: 1500,
    loop: false
});

The problem is that I have no idea where the coordinates for the shape's path are at any given time-- as far as I can tell, in order to make that guided morph to a rectangle, anime.js would need the initial coordinates of the path. (I may be totally wrong about that.) If anyone has a suggestion for how to do this, I would be most grateful! (Or if you've noticed that my understanding of anime.js is completely flawed, that would be helpful too.)

解决方案

In my opinion, - the best practice of mastering JS libraries for SVG animation is - understanding the basics of creating the simplest SVG figures and their manual animation.
Let me show you, on a concrete example, one way how this can be done.

Create an animation of the morphing of a pentagon into a square.

To morph one figure into another, you need two patches with the same number of nodes.
In our case, if a pentagon should have five nodes, then the patch of the square also has five.
Draw the shapes in a vector editor, for example, Inkscape.

Set the size of the document 400х400 px
We set the horizontal and vertical guides that run through the center of the document and the anchor points. In the figure below, these are blue lines. On them we will navigate when dragging nodes.
In the tool palette, select the polygons
Set the cursor to the center of the document and draw a pentagon

Select the menu: Contour / Ocontur object (Shift + Ctrl + C)
We save the files in * .svg format, but the editor does not close
From the entire code of the file, we need only one line with the attribute d = "m ..z"

<path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />

Return to Inkscape, select the tool - edit the contour nodes, and drag the nodes to make a square
Again, save the file and copy the new values of the attribute d = "m .." The values we get are needed to substitute in the variable values = ".."

values="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z;
         m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z"

A semicolon separates the path values for a square and a pentagon. With the animation, the path will change from one value to another.

Below is the code that implements the animation of a smooth transformation of one figure into another:

Start animation when clicking on svg

 <svg id="svg2" width="400" height="400" viewBox="0 0 400 400" id="svg2" version="1.1">
      
      <g id="layer1" transform="translate(0,-652.36216)" style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue">
        <path d="m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z" >
    	 <animate attributeName="d" begin="svg2.click" dur="6s" fill="freeze" repeatCount="1" restart="whenNotActive" 
          values=" m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z;
		           m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />	  
          

	</path>
      </g>
    </svg>

Where,

<animate attributeName="d" - animation command attribute 'd'

begin="svg2.click" - start animation when clicking on svg

dur="6s" - Animation duration 6 seconds

fill="freeze" - After the animation ends, the figure freezes in its final position

repeatCount="1" - Single repetition

restart="whenNotActive" - prohibit the animation from restarting until it finishes

More complex example of the same technique

Animation tooltip with notches at the arrow

From an svg file made in Inkscape, copy the patch blank tooltip

<svg version="1.1"  viewBox="0 0 240 240"  >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

Change the shape of the workpiece tooltip by dragging the nodes

Again copy the patch from the new svg file Inkscape

<svg id="svg1" version="1.1"  viewBox="0 0 240 240"   >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.4;stroke:#0391fd"/>
  </svg>

Just like in the first example, we make the animation an attribute of the patch d

body {
  background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bdiv {
  display: table;
}

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}

<div class="bdiv">
  <div class="container">
    <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <g transform="scale(0.8)">
        <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
          <animate id="an_path" attributeName="d" values="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z; m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z  "
          begin="svg1.click" dur="8s" repeatCount="1" fill="freeze"></animate>
        </path>
        <text x="30" y="50" font-size="18" fill="white">click me </text>
      </g>
    </svg>
  </div>
</div>

Animating the attribute "d" of the patch is a very powerful and efficient tool that allows you to implement a variety of transformations.

After mastering and understanding the manual method of animating SVG shapes, it is much easier to be utilized libraries JS.

这篇关于使用JavaScript获取变形SVG的当前坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用JavaScript获取变形SVG的当前坐标 [英] Getting current coordinates for a morphing svg with javascript

问题描述

相同技术的更复杂示例

More complex example of the same technique

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用JavaScript获取变形SVG的当前坐标 [英] Getting current coordinates for a morphing svg with javascript

问题描述

相同技术的更复杂示例

More complex example of the same technique

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭