Question

如果标题不正确，我道歉，但我不确定它应该是什么。我试图为"marker.svg"文件中包含的svg图像标记设置动画。我想复制这个gif完全相同的效果：

但是对于我的视觉感知，似乎只有标记的顶部是动画的。

在我的代码中，主要问题是标记从其原点移动。这是我目前的结果：

如何匹配gif的动画？

谢谢。

  <body>

  <script type="text/javascript">

    const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);

    svg.append("circle").attr("r",5).attr("cx",253).attr("cy",102).style("stroke","#FF0000");

    var widthMarker=50;
    var img = svg.append("svg:image")
        .attr("xlink:href", "marker.svg")
        .attr("width", widthMarker)
        .attr("height", widthMarker)
        .attr("x", 228)
        .attr("y",53)
        .on('mouseover', function(){
          d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker+50);
        })
        .on('mouseout', function(){
          d3.select(this).transition().ease("bounce").duration(500).attr("height",widthMarker);
        })

  </script>
  </body>

http://plnkr.co/edit/IqebfdBikFcezCnz2YxA?p=preview

Answer 1

我弄乱了＆＃34; y＆＃34;在鼠标悬停和鼠标移动时协调attr，我得到你正在寻找的结果。

<body>
  <script type="text/javascript">
    const svg = d3.select("body").append("svg").attr("width", 1000).attr("height", 1000);

    svg.append("circle").attr("r", 5).attr("cx", 253).attr("cy", 102).style("stroke", "#FF0000");

    var widthMarker = 50;
    var img = svg.append("svg:image")
      .attr("xlink:href", "marker.svg")
      .attr("width", widthMarker)
      .attr("height", widthMarker)
      .attr("x", 228)
      .attr("y", 50)
      .on('mouseover', function() {
        d3.select(this)
          .transition()
          .ease("bounce")
          .duration(500)
          .attr("height", widthMarker + 50)
          .attr("y", 17);
      })
      .on('mouseout', function() {
        d3.select(this)
          .transition()
          .ease("bounce")
          .duration(500)
          .attr("height", widthMarker)
          .attr("y", 50);
      })
  </script>
</body>

以下是更新后的Plunkr。

如何使用d3.js为这个gif中的svg元素顶部设置动画效果？

1 个答案: