他们如何使用SVG,静态图片,热点和javascript

问题描述 投票:1回答:1

在以下站点的大约一半处,有一幅带有SVG动画和热点的房屋图像。

https://enphase.com/en-us/homeowners

我看到了所有单独的元素,但我不知道它们是如何将它们放在一起的。使用百分比将元素定位到5个小数位。我假设他们使用一些软件来创建更重要的SVG,即布局。知道那个软件是什么吗?现在,他们可以手工编码布局并计算位置。

javascript animation svg
1个回答
0
投票

[您可以通过javascript动画计时器使用SVG stroke-dasharraystroke-dashoffset属性进行操作,具有相同的功能,我通常使用D3.js进行这种类型的动画/ SVG操作,但是您也可以完全在javascript中进行操作,这是block exampleNoah Veltmanbl.ocks.org

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    path {
      fill: none;
      stroke: #d3008c;
      stroke-width: 2px;
    }

    #arrowhead {
      fill: #d3008c;
      stroke: none;
    }

  </style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="960" height="500">
  <path d="M636.5,315c-0.4-18.7,1.9-27.9-5.3-35.9
  	c-22.7-25-107.3-2.8-118.3,35.9c-7,24.4,20.6,37.2,16,71c-4,29.6-30.8,60.7-56.5,61.1c-30.8,0.4-32.9-43.8-81.7-70.2
  	c-50.9-27.6-110.1-12.9-125.2-9.2c-66.1,16.4-82.2,56.9-109.2,47.3c-38-13.6-55.9-112.1-19.8-143.5c39-34,121.2,27.7,148.1-3.8
  	c18-21.1,3.1-74.3-25.2-105.3c-31.1-34.1-70.1-32.4-105.3-76.3c-8.2-10.2-16.9-23.8-15.3-39.7c1.2-11.4,7.5-23.3,15.3-29
  	c33.8-25,101.6,62.6,193.1,59.5c40.1-1.3,38.7-18.5,99.2-38.9c126.2-42.6,242.4-4.9,297.7,13c54.7,17.7,105.4,35,129.8,82.4
  	c13,25.3,22.9,67.7,4.6,87c-11.6,12.3-25.1,5.1-46.6,20.6c-2.8,2-28.9,21.4-32.1,49.6c-3.1,27.4,18.7,35,29,70.2
  	c8.8,30.1,8.5,77.8-18.3,99.2c-32.3,25.8-87,0.6-100-5.3c-69.6-32-67.2-88.4-73.3-109.2z"/>
    <defs>
      <path id="arrowhead" d="M7,0 L-7,-5 L-7,5 Z" />
    </defs>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

  var path = document.querySelector("path"),
      totalLength = path.getTotalLength(),
      group = totalLength / 20,
      start;

  var arrowheads = d3.select("svg").selectAll("use")
    .data(d3.range(20).map(function(d){ return d * group + 50; }))
    .enter()
    .append("use")
      .attr("xlink:href", "#arrowhead");

  path.style.strokeDasharray = "50," + (group - 50);

  requestAnimationFrame(update);

  function update(t) {
    if (!start) {
      start = t;
    }

    var offset = -group * ((t - start) % 900) / 900;

    path.style.strokeDashoffset = offset;

    arrowheads.attr("transform",function(d){

      var l = d - offset;

      if (l < 0) {
        l = totalLength + l;
      } else if (l > totalLength) {
        l -= totalLength;
      }

      var p = pointAtLength(l);
      return "translate(" + p + ") rotate( " + angleAtLength(l) + ")";
    });

    requestAnimationFrame(update);
  }

  function pointAtLength(l) {

    var xy = path.getPointAtLength(l);
    return [xy.x, xy.y];

  }

  // Approximate tangent
  function angleAtLength(l) {

    var a = pointAtLength(Math.max(l - 0.01,0)), // this could be slightly negative
        b = pointAtLength(l + 0.01); // browsers cap at total length

    return Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;

  }

</script>

这是<path>在没有动画的情况下的样子:

path {
  fill: none;
  stroke: #d3008c;
  stroke-width: 2px;
}

#arrowhead {
  fill: #d3008c;
  stroke: none;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="960" height="500">
  <path d="M636.5,315c-0.4-18.7,1.9-27.9-5.3-35.9
  	c-22.7-25-107.3-2.8-118.3,35.9c-7,24.4,20.6,37.2,16,71c-4,29.6-30.8,60.7-56.5,61.1c-30.8,0.4-32.9-43.8-81.7-70.2
  	c-50.9-27.6-110.1-12.9-125.2-9.2c-66.1,16.4-82.2,56.9-109.2,47.3c-38-13.6-55.9-112.1-19.8-143.5c39-34,121.2,27.7,148.1-3.8
  	c18-21.1,3.1-74.3-25.2-105.3c-31.1-34.1-70.1-32.4-105.3-76.3c-8.2-10.2-16.9-23.8-15.3-39.7c1.2-11.4,7.5-23.3,15.3-29
  	c33.8-25,101.6,62.6,193.1,59.5c40.1-1.3,38.7-18.5,99.2-38.9c126.2-42.6,242.4-4.9,297.7,13c54.7,17.7,105.4,35,129.8,82.4
  	c13,25.3,22.9,67.7,4.6,87c-11.6,12.3-25.1,5.1-46.6,20.6c-2.8,2-28.9,21.4-32.1,49.6c-3.1,27.4,18.7,35,29,70.2
  	c8.8,30.1,8.5,77.8-18.3,99.2c-32.3,25.8-87,0.6-100-5.3c-69.6-32-67.2-88.4-73.3-109.2z"/>
    <defs>
      <path id="arrowhead" d="M7,0 L-7,-5 L-7,5 Z" />
    </defs>
</svg>
© www.soinside.com 2019 - 2024. All rights reserved.