в сафари, как прокрутить SVG дочерний элемент в поле зрения? - PullRequest
Новая
       4

в сафари, как прокрутить SVG дочерний элемент в поле зрения?

0 голосов
/ 26 февраля 2020

Учитывая 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>

1 Ответ

0 голосов
/ 26 февраля 2020

Если не считать чего-то более чистого, то решение, которым я пользуюсь сейчас: 

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