What is the process for using the scrollIntoView function on an svg element like a rectangle?

I have a graph panel with an SVG. The nodes in the SVG are listed in a separate panel. I would like for when a node is clicked in the node list, the SVG will scroll to that specific node. Each node is represented by a rectangle shape. However, I noticed that only the top border of the node is visible, while the rest of the node remains out of view. Is there a solution to this issue? (using either Javascript or ExtJS)

Here is the code snippet I am using:

function selectRectangle(Id){
  var element = Ext.get(Id);
  element.scrollIntoView(Ext.get('graph-panel-body'), true);}
javascriptextjssvgextjs4

Answer №1

For some unknown reason, scrollIntoView does not seem to function properly with SVG elements. Here is a workaround that I have discovered:

Assuming the SVG element is nested within a div like this:

    <div id="container">
        <svg ...>

            ...
            <path id> ...</path>
        </svg>
    </div>

Now, imagine you have the desired element stored in a variable called 'element':

        var bbox = ele.getBBox()
        var top = bbox.y + bbox.y2
        top = 50 * Math.floor(top/50)
        $("#container").get(0).scrollTop=top

It's worth noting that the getBBox method can be slow, so use it cautiously.

Answer №2

It appears that the issue lies in the SVG element you are attempting to scroll the view to, as it may have a y or dy attribute causing an offset from the top. Unfortunately, the scrollIntoView method in Chrome does not consider this offset (unlike Firefox), leading it to scroll to the top based on incorrect positioning assumptions with SVG elements.

A bug report is open for this issue which you can and should mark as important:

https://bugs.chromium.org/p/chromium/issues/detail?id=803440

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on sending a basic ID using jQuery AJAX to an Action method in ASP.NET MVC

I'm facing an issue with a category drop-down list where I have written the following code in its onchange event: function onChange() { $.ajax( { url: '/Home/GetProducts/', type: 'POST', data: JSON.stringify({ID:$("#Category").val ...

javascriptjqueryajaxasp.net-mvc

An unexpected error occurred: [$injector:modulerr] (unidentified)

My website is running smoothly with AngularJS on one page, but I'm encountering an error in the console on other pages that do not use AngularJS. The error message reads: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$in ...

javascriptangularjs

Sentry: Easily upload source maps from a nested directory structure

I am currently developing a NextJs/ReactJs application using Typescript and I am facing an issue with uploading sourcemaps to Sentry artefacts. Unlike traditional builds, the output folder structure of this app mirrors the NextJs pages structure, creating ...

javascripttypescriptnext.jssentry

Sinon respects my intern functions during testing in ExpressJS

At the moment, I am working on incorporating sinon stubs into my express routes. However, I am facing an issue where my functions are not being replaced as expected. I would like my test to send a request to my login route and have it call a fake function ...

javascriptnode.jsexpressmocha.jssinon

Saving the previous component's DOM in a React application

Understanding the Root.js File const Root = () => ( <HashRouter> <div> <Route exact path="/" component={Main}/> <Route path="/main/:page" component={Main}/> <Route path="/detail ...

javascriptreactjsdomreact-router

EMFILE error encountered while attempting to initialize a new react-native project and watch file changes

Looking to start a new react-native project? Here are the steps: Begin with react-native init testproject then run react-native run-ios Encountering an error while watching files for changes: EMFILE {"code":"EMFILE","errno":"EMFILE","syscall":"Error watc ...

javascriptreactjsnpmreact-nativewatchman

Count the occurrences of values in a JSON object using JavaScript

I'm dealing with a JSON array in vanilla JavaScript (no JQuery) and I've hit a roadblock. My task is to identify each unique value for 'Service' and calculate the frequency of each value. For example, if the value 100 appears 3 times ...

javascriptjson

What is a clever way to monitor the completion of a forEach loop using promises?

I'm new to promises and I'm attempting to use them for the first time. After the completion of the forEach loop, I want to call another function for additional processing. However, when using forEach, the function insertIDBEvents is only printed ...

javascriptnode.jsforeachpromise

Displaying divs depending on dropdown selection - Troubleshooting script issue

When I try to display certain divs based on dropdown selection using the script below, it works fine on a simple page. However, when I implement it on my current development page, it completely messes up the layout, turning everything black and adding stra ...

javascriptjqueryhtml

What is the proper way to define an element's style property in strict mode?

Assuming: const body = document.getElementsByTagName('body')[0]; const iframe = document.createElement('iframe'); iframe.src = protocol + settings.scriptUrl + a; iframe.height = 1; iframe.width = 1; iframe.scrolling = 'no'; ...

javascriptcss

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

javascriptangularwebpack

Archive a webpage with refreshed content using ajax

Is there a way to save a webpage that has been updated through an ajax request? I'm looking to preserve basecamp message threads, but exporting is not possible since I am not the account owner. When attempting to use the javascript command below: jav ...

javascriptajaxsavebasecamp

Marionette's Take on the Undead: Zombie Perspectives

Error in JS Console: Uncaught ViewDestroyedError: View (cid: "view351") has already been destroyed and cannot be used. backbone.marionette.js?body=1:1715 Code Snippet: initialize: (options) -> HWAs = @model.get('homework_assignments') @ ...

javascriptbackbone.jsmarionette

Synchronize the completion of multiple promises in ExpressJs before sending a response

My POST API contains some logic that needs to wait for all promises to finish before sending the response. However, I'm facing an issue with making my server wait using await Promise.all(tasks); I've tried various approaches and even used librar ...

javascriptnode.jsexpresspromise

Ways to specify the styles for tr, td, and label elements within a material table

Hey there! Currently, I'm working with material table in react. I came across this page: https://material-table.com/#/docs/features/styling, where it mentions that we can use cellStyle, headerStyle. But what if I want to add more detailed styles to e ...

javascriptreactjsmaterial-ui

The ng-submit() directive in Angular does not trigger submission when the "Enter" key is pressed in a text field

I have created a basic form using Angular where I want the ng-click function (updateMsg({name: name,room: room})) to be triggered when the user enters a value and then presses enter key. Unfortunately, the current code does not work as expected. The funct ...

javascriptangularjs

Is Riot.js the best choice for server-side rendering and routing?

Currently, I am using Node along with Riot.js and the Grapnel routing library. I have successfully set up routing on the client side, but I am facing difficulty in making it work on the server side. The functioning of my client router is straightforward. ...

javascriptnode.jsriot.js

Examining the Similarities Between Two Arrays using ng-repeat

I am attempting to generate multiple checkboxes using ng-repeat from Array1, and I want to apply the "checked" attribute (using ng-checked) to specific checkboxes based on whether there is a match in Array2. Here are the elements in array1 within the cont ...

javascriptangularjsangularjs-ng-repeat

How can jQuery identify the elements that the selected text spans across?

In the midst of a project, I find myself in need of extracting specific text within an iframe. This text may traverse across multiple spans within the iframe, each identified by a unique ID spanning from 1 to the end of the page. My goal is not to retrie ...

javascriptjquery

Is async programming synonymous with multi-threading?

Discussing a JavaScript code that utilizes the setInterval function every 2 seconds. There is also an animation event for some control triggered by the onblur event. If the onblur event occurs (along with the animation), there is a possibility of encount ...

javascriptjquerymultithreadingasynchronous