【问题标题】:find length of an svg circle via jquery?通过 jquery 查找 svg 圆的长度?
【发布时间】:2016-01-21 01:08:30
【问题描述】:

我希望创建一个变量来保存在 jquery 中计算的 svg 圆长度。

$(function() {

  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */

    var pathLen = $(this).find('circle').getLengthOfPath????

    $(this).find('circle')
      .stop()
      .animate({
        'stroke-dashoffset': 0
      }, 1000, 'easOutBounce');
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle')
      .stop()
      .animate({
        'stroke-dashoffset': pathLen
      }, 1000, 'easOutBounce');
  });
});

感谢您的宝贵时间!

【问题讨论】:

  • 第一步:想知道“我该怎么做”,没有 jquery。 (正如你所发现的)。然后第二步总是可以“如果我使用 jQuery 可以更简洁地完成”。从“我如何在 jquery 中执行此操作”开始,而没有它可能甚至不需要它的选项,可能永远找不到一个像样的解决方案(有时纯 JS 比 jQuery 更有效,就像在这种情况下)

标签: javascript jquery css svg


【解决方案1】:

圆的路径长度是 2 * pi * cr。没有内置的方法可以解决这个问题。

【讨论】:

  • 首先,感谢您的快速响应。但我仍然有一些问题。因此,使用上面的示例,我将如何在我的代码中实现它,因为我仍然收到错误。我有多个带有圆形元素的 SVG 元素。
  • 什么错误?如果您想要更详细的回复,请发布一个显示问题的工作示例。在您的问题中添加一个 sn-p,或使用 jsfiddle 之类的服务。
  • getTotalLength() 函数是在 SVGPathElement 上定义的,但不是在 SVGCircleElement 上定义的。调用 getTotalLength() 函数将对 元素起作用,但会在 元素上抛出错误。
  • 抱歉,我傻了一会儿才明白。感谢大家的帮助!
  • 请记住,如果您确实使用了真正的<circle> 元素,那么这个答案几乎是正确的,但并不完全正确:它是一个介于 2·π·(cr - strokeweight/2) 和 2·之间的值π·(cr + strokeweight/2),因为现在至少有三个可能的“周长”:圆/笔划边缘的内周,如果我们忽略笔划,则为“真实”周长,以及笔划/画布边缘的外周。
猜你喜欢
  • 2018-07-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-02-10
  • 2015-07-20
  • 2014-09-06
  • 1970-01-01
  • 2013-04-11
相关资源
最近更新 更多