在 safari 中如何将 SVG 子元素滚动到视图中？答案

【问题标题】：in safari how to scroll SVG child element into view?在 safari 中如何将 SVG 子元素滚动到视图中？
【发布时间】：2020-06-10 14:42:05
【问题描述】：

给定一个超出窗口右边缘的 SVG（导致水平滚动），我有以下代码使窗口将给定的 SVG 子元素滚动到视图中。

在 chrome 中可以定位 svg <a> 元素。但是在 Firefox 中，我需要选择 <a> 的一个子元素，它是一个形状（而不是像 <a> 这样的容器）。

到目前为止，我还没有想出在 Safari 中执行此操作的方法。有解决办法吗？

//works in chrome
document.getElementById('scroll-this-into-view').scrollIntoView()

//works in firefox and chrome
document.querySelector('#scroll-this-into-view circle').scrollIntoView()

//works in safari 
// ?????????

svg {
  width: 4000px
}

<svg id="bcfc0609-76dc-45c5-a5bd-e0c1f9faf95a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1856 150.03">
    <title>test</title>
    <a href="http://google.com">
        <circle cx="29.5" cy="119.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="179.5" cy="76.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="356.5" cy="60.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="523.5" cy="83.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="706.5" cy="119.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="911.5" cy="83.53" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="1177.5" cy="90.53" r="29.5" style="fill: #c13030" />
    </a>
    <a id="scroll-this-into-view" href="http://google.com">
        <circle cx="1525.53" cy="29.5" r="29.5" style="fill: #c13030" />
    </a>
    <a href="http://google.com">
        <circle cx="1826.5" cy="120.53" r="29.5" style="fill: #c13030" />
    </a>
</svg>

【问题讨论】：

标签： javascript svg safari

【解决方案1】：

我现在使用的解决方案是：

 const circle = document.querySelector('#scroll-this-into-view circle')
 const circleBoundingRect = circle.getBoundingClientRect()
 window.scrollTo(circleBoundingRect.left - 50 + window.scrollX, 0)

【讨论】：