javascript - 如何使用 jQuery 使 SVG 对象可点击并滚动到 anchor ？

Question

我的 SVG 通过对象标签嵌入，并且还具有 CSS3 悬停动画。尝试使用悬停动画超链接 SVG 会扰乱指针或单击操作。我没有使用长 SVG 路径代码来进行代码组织首选项。

下面的 JavaScript 使其可点击，但它不会转到所需的 anchor # 以稍后在页面中滚动。 你知道如何结合这两种点击功能吗？

这很困惑，我知道!

HTML

<object id="example" type="image/svg+xml" data="/images/icon.svg"> </object>

SVG 内部:

<a xlink:href="#top">
    <g class="whole" fill="#fff">
        <rect id="body" x="113.83" y="185.4" width="43" height="49.5" style="stroke:#f36a24;stroke-miterlimit:10;stroke-width:3px" />
        <ellipse id="head" cx="134.96" cy="165.04" rx="14.13" ry="13.92" style="stroke:#f36a24;stroke-miterlimit:10;stroke-width:3px" />
    </g>
</a>

//下面的JS

<script>
       (function ($) {
           $(document).ready(function () {
               $('svg a').click(function (event) {
                   alert(event.target.parentElement.tagName);
               });
           });
       })(jQuery);

</script>

<script>
    $(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>

Answer 1

正如您所说，点击正在起作用，为了滚动到另一个 anchor ，还需要执行一个步骤。只需要在点击事件时执行以下代码片段即可。

$('html, body').animate({
      'scrollTop':   $('#scrollTo').offset().top
}, 2000);

检查此示例 https://jsfiddle.net/q70jq0kt/1/