I had a look at the source of http://openseadragon.github.io/svg-overlay/demo.html:

var overlay = this.viewer.svgOverlay();

                    var d3Rect = d3.select(overlay.node()).append("rect")
                        .style('fill', '#f00')
                        .attr("x", 0.5)
                        .attr("width", 0.25)
                        .attr("y", 0.5)
                        .attr("height", 0.25);

I am wondering if an overlay should be added using the the viewer's method addOverlay (https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#addOverlay).

If I understand correctly, the viewer then keeps track of the overlays and removes them when viewer.clearOverlays is called.

I have a use case which requires overlays to be redrawn (dasch-swiss/knora-ui#168).

Not certain if this applies to svg-overlay or OpenSeaDragon.

I'm using svg-overlay to provide a border around the currently hovered image. All was working well, but I noticed the border was slightly hidden on the left of images (and on the right of images) when I hit the home button on OSD. I set the viewportMargins option on the OSD viewer to have a left and right margin of 2. Border now shows properly in the X direction, but the Y is too "low". In Firebug, I can adjust the y parameter of the "g transform="translate(x, y) scale(blah) element to raise the border to the right location. I can also take the other route of reducing the Y of the rectangle that is a child of the "g" element. The outline has the correct width/height - it's just misplaced in the Y direction.

I see there is a getBoundsWithMargins for the OSD viewport, but not for the tiledImage. I'm using the tiledImage.getBounds call to get the size of the border along with the x/y to get the top/left of the rectangle.

Do I need to do something with the svg-overlay to fix this, or do I need to do something on the OSD side to account for the margins? There is probably some calculation I can perform to get the correct Y coordinate when using margins - but I'm not seeing it.

Thanks!

display：

It seems the SVG is drawn on to the window as soon as some zooming or panning happens.
Let's say we have a use case where the drawing of the SVG is compute intensive and that the SVG doesn't change too often.
Would it make sense to let OpenSeadragon draw the SVG to image tiles with alpha channel instead of to the window?
Maybe zooming and panning would be more smooth?
Would there be a difference in anti-aliasing?
Could this plugin support drawing the SVG to image tiles?

how can i add a image or icon to the rect? i used D3.js but failed
thank you

Hi,

My goal is to be able to click on the svg object and trigger the load of new image. For now I am simply trying to add a link. The code below disables the clicktozoom in the circle area, however, it does not display any active link. What is the right correct way to achieve this?

                var overlay = this.viewer.svgOverlay();

                var d3Rect = d3.select(overlay.node()).append("circle")
                    .style('fill', '#f00')
                    .style("fill-opacity", .2)
                    .attr("xlink:href", "http://google.com")
                    .attr("cx", 3964)
                    .attr("cy", 2742)
                    .attr("r", 72);

                overlay.onClick(d3Rect.node(), function() {
                    console.log('click', arguments);
                });

Hi,
Is it possible to load in "rect" an external SVG file instead of an image? (cross fingers..)
Ive been looking some examples, like this one. [https://github.com//issues/27]

and tried to change it to and svg file instead but no success.

Thanks lots in advance for any help.

I'm trying to implement something similar to the following example.
http://bl.ocks.org/zloysmiertniy/0ab009ca832e7e0518e585bfa9a7ad59

How can I get the new image coordinates after the drag event ends from the delta coordinates?

Hi there Ian:

We're using your excellent pan-zoom framework in a development which manages assets in a side-by-side basis, using PNGs and SVGs. Of course, PNG's part is piece of cake, but I'm having problems in the SVG part.

Our SVGs are external files, wich we need to "ajax" in order to have the advantage of media-caching and the ability to tweak styles through CSS (not inline SVG or img translation are covered here).

This way We're "ajaxing" the SVG under the general algorithm to insert an external SVG in an HTML page:

var ajax=new XMLHttpRequest();
ajax.onload=function(e){
  try{
    document.body.insertBefore(ajax.responseXML.documentElement,document.body.childNodes[0]);
  }
  catch(e){
    console.log(e);
  }
};
//
ajax.open("GET",path,true);
ajax.responseType="document";
ajax.send();

The case is that under this approach I'm creating a node with all the header , symbols, etc..., and I suspect the overlay.node() SVG surface is waiting for SVG primitives only. So we had to parse our SVGs and add the different elements (path, rect, line, ...) one after the other. Isn´t it?

Best regards.

$ npm install --save git+https://[email protected]/openseadragon/svg-overlay.git

import OpenSeadragon from 'openseadragon';
import 'svg-overlay';

...

Expected: Will import svg-overlay and make it possible to call viewer.svgOverlay().

Actual:

Error: [openseadragon-svg-overlay] requires OpenSeadragon

The following PR fixes the issue:
#23

Please review and merge.

Hey There,
Wondering if there is any way to do fixed size SVG overlays. I'm trying to add a simple legend to my viewer, and don't want the user to be able to zoom into the legend.
-Simon

I try to map SVG to image but I don't figure out why it's going off please help.

Using OpenSeadragon (latest version 2.1.0) to display a hierarchy of images. I'm using svg-overlay to provide a highlight around the image currently being hovered over. All works well at reasonable zoom levels. The hierarchy of images can be quite deep, requiring some very high zoom levels. OpenSeadragon is handling the imaging correctly, but when I get to some extreme zooming, the border around the image becomes flakey. At some point, IE just refuses to draw the highlight at times or maybe just portions of the highlight. FF and Chrome work better, but more often than not, the border is no longer around the image.

See the two captures below of the HTML that is being created by svg-overlay for the transform on the SVG that is being attempted. I've tried resizing the svg by capturing a mouseMove event after the zooming is complete. (Scroll the mouse, then move it slightly.) Doesn't make any difference.

Are there any options between OpenSeadragon and svg-overlay to correct this highlight at high zoom levels?

Here are the two captures showing the transform calculations.
Mouse wheel scroll in. SVG outline is transformed too far to the left.
<svg style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" width="1412" height="580"> <g transform="translate(-3346076.9664332606,-946136.7470841483) scale(1665727.5012608196)"> <rect id="_highlight" pointer-events="none" style="fill: none; stroke: rgb(0, 136, 255); opacity: 1; stroke-width: 0.00000211319; pointer-events: none;" x="2.008827313679615" width="1.17102241271146" y="0" height="0.8782377634374368"> </g> </svg

One mouse wheel scroll out. SVG outline is transformed to far to the right.
<svg style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" width="1412" height="580"> <g transform="translate(-2788320.1386943827,-788419.7170143984) scale(1388106.2510506825)"> <rect id="_highlight" pointer-events="none" style="fill: none; stroke: rgb(0, 136, 255); opacity: 1; stroke-width: 0.00000253583; pointer-events: none;" x="2.008827313679615" width="1.17102241271146" y="0" height="0.8782377634374368"> </g> </svg>

Hello,

I have been playing a bit with this beautiful library but I am stuck on something.

I can successfully display an SVG shape and can add an event for double clicking on it:

new OpenSeadragon.MouseTracker({
          element: <my-svg-element>,
          dblClickHandler: (e) => console.log(e)
    })

Otherwise catching the double click event disable all the other events (for instance being able to drag the view) happening on the SVG shape. I guess the event is consumed wether or not a handler is attached to it? Reading the documentation, I was expecting the default action to only be prevented if PreventDefaultAction is set to true for the incoming event, but I guess I am missing something?

Cheers, and wonderful work on this library 👍

This is mainly a question of suitability (most likely the answer will be "no, just render to png"). I've got a 6 metre by 3 metre svg with details down to the 2-5mm level. Does svg-overlay section the svg and/or work on svg sections? (And if so, are there recommended routes to create those sections?)

It seems that resizing the window triggers the viewer.animate event, which should in theory resize the overlay, but I've found that it consistently gets "decalibrated" from the viewer when resizing the window, especially during sudden resize events, such as switching from maximized to windowed mode.

I hot-patched it in my app, but it seems like a really easy fix to incorporate into the plugin, so I'll have a PR your way shortly.

Hi,
i have few doubt's ,

1. is that possible to add fabricjsOverlay on svgOverlay?
2. Clear svg overlay and add new overlay.
3. Need help in Arrow head. i am not able to add arrow head

Hi everywere:

I need to find the best implementation for a OSD viewer showing a electrical circuit loaded from a SVG file.

That is, all the info comes from a SVG file and so is not a "overlay", in a proper way, but the main information container, as the background "image" is only a "dummy" solid color (white) actually.

In order to generate that background, I can think in several options:

1. hack it in a really dirty way, by means of a "premeditated" invalid tileSource URL;
2. using an image placeholder consisting in a solid color PNG with an enough resolution;
3. render the SVG as a rasterized image (i.e. again PNG) with an enough resolution.

All these alternative solutions do not appear to be very elegant, so... any advice on it?

Hi,

How come SVG overlay does not work when I use custom tile source definition like shown in this example (https://openseadragon.github.io/examples/tilesource-custom/)?

I have prepared some samples to illustrate the problem and here (http://www.c-ev.com/osdragon/regulartilesource.php) you can see the regular definition of the tile source, and here (http://www.c-ev.com/osdragon/customtilesource.php) you can see the custom tile definition version. The svg overlay is lost in the latter and I have no clue why..

Hi Ian,

Thank you (and everyone else) for helping on the discord channel.

I am using the svg-overlay plugin for OSD to lay a set of complicated and nested svg elements over the top of images in a high accuracy application. Unfortunately, while the flip function works great on the tiled image, it does not affect the svg on top. As a side affect, the svg's x-coordinates are reversed, so when I drag the image right, the svg moves left. This is a pretty nifty parallax affect, but definitely isn't what I'm going for.

I would love for the svg to flip with the image, keeping it's exact positioning -- as if the svg were part of the image. My viewer and overlay code are below for reference.

    var viewer = OpenSeadragon({
        id: "openSeaDragonWrapper",
        prefixUrl: "../openseadragon/images/",
        defaultZoomLevel: 0,
        preload: true,
        immediateRender: true,
        homeButton: "plateResetPanZoomButton",
        flipButton: "plateFlipButton",
        showFlipControl: true,
        showRotationControl: true,
        showNavigator: true,
        maxZoomPixelRatio: 4,
        zoomPerScroll: 2,
        tileSources: [
        {
          width: 4000,
          tileSource: {
            //required
            type: "zoomifytileservice",
            width: 2048,
            height: 2048,
            tilesUrl:
              "../assets/ZoomifyImageExample/",
            //optional
            tileSize: 256,
            fileFormat: "jpg"
          },
        },
      ],
    });

    var overlay = viewer.svgOverlay()
    //overlay.node().parentNode.style.pointerEvents = 'none';
    overlay.node().append(svgImage)


    for (let i=0; i < overlay._node.childNodes[0].childNodes.length -1; i++) {
      if(overlay._node.childNodes[0].childNodes[i].nodeName === "a"){
        new OpenSeadragon.MouseTracker({  
          element: overlay._node.childNodes[0].childNodes[i],
          clickHandler: function(event) {
            var target = event.originalEvent.target;
            if (target.matches('a')) {
              if (target.getAttribute('target') === '_blank') {
                window.open(target.getAttribute('href'));
              } else {
                location.href = target.getAttribute('href');
              }
            }
          }
        });
      }
    }

Hi there! I'm currently working on a map project and want the user to be able to place a pin on the map when they click on a location. I need the pin image to not scale when the user zooms in or out and remain the same size and stay in the same location of the original mouse click. I've been trying to figure this out for a few days and just haven't been able to come up with a solution. The resize function works perfectly for keeping the image in the same location on the map but the scaling is what I need to change. If you have any ideas it would be really appreciated, thanks!

I've added a number of d3 shapes (circles and rectagles) as an overlay to a rather large image (the original file was ~2GB) and when zooming or moving around some of them flicker and/or disappear. Is this a known issue?

i don't how to draw annotations in svgoverlay on openseadragon

Does the svg-overlay plugin have any software license?
I don't see any LICENSE.txt file in the source code tree.

Hey! After having been pointed to this lovely repo, I went ahead and replaced all 'standard' OSD overlays in my application with d3 SVG elements. However, functionality in Firefox is now broken, since SVG elements seem to have a wrong size when inspected with developer tools.

SVG element, Firefox on the left, Chrome on the right:

Another SVG element, Firefox on the left, Chrome on the right:

I'm suspecting the size being off in Firefox to lead to unwanted behavior: Mouseover'ing the colored pictograms and name plates should normally open a tooltip for each of them. However, in Firefox, possibly because of overlapping elements, this functionality is broken.

Any ideas for a fix would be highly appreciated!

Edit: Also added the project code here.

Is it possible to show and hide overlays as a whole? (created through var overlay = viewer.svgOverlay() ? )

I tried viewer.world.getItemAt(x).setOpacity and many other options without success.

Also, is it possible to create hover / mouseover events for svg elements in the overlay?

Thanks

Hello,

I am developing an angular application that uses openseadragon viewer and I'd like to place some svg overlays on this viewer.
However, I am having trouble getting the svg-overlay package initialized into the openseaviewer.

I've installed both npm packages and am importing them as shown below.

import * as OpenSeadragon from 'openseadragon';
import * as OsdSvgOverlay from 'svg-overlay';

this.openSeadragonViewer = OpenSeadragon({
     id: "openSeadragonContainer",
     ...
});

var overlay = this.openSeadragonViewer.svgOverlay();

After this code executes it throws an error saying that '.svgOverlay is not a function'.
I've also tried declaring them in another way

declare var OsdSvgOverlay: any;

But this throws the same error.

Is there something I am doing wrong here? Or can anyone who succesfully added this in a typescript / angular project share their expertise?

Thanks in advance!

If you spread to zoom over the svg element it causes browser to zoom instead of OpenSeadragon itself. You can use the demo provided: http://openseadragon.github.io/svg-overlay/demo.html

I am wondering if it is posssible to add a viewBox=(0 0 width height) attribute to the svg element?

The reason beeing, I am having issues with svg images that have elements that extend outside of the image (as in they have negative coordinates, or extend beyond the image itself).

The external svg file that I load has the viewbox applied, but it obvously gets removed when I add the external file to the overlay node.
See here for an example:

See openseadragon/openseadragon#883

Hi
I'm new to all this. I read thru the issues but I don't get how i can put my SVG on top of OSD image without doing all these manipulations. Am I missing something? Here's SVG file (fetched as text, the coordinates are the image coordinates obviously):

<svg version="1.2" id="untitled" viewBox="0 0 19843 12756" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M170.141,271.113 C176.18599999999998,298.238 178.93699999999998,337.209 181.937,347.209C184.937,357.209 180.474,366.779 188.141,387.113C193.207,400.55 194.088,413.544 194.808,428.013C195.808,448.113 199.69,464.331 201.388,474.349C204.9,495.071 211.283,511.525 215.923,515.055C229.142,525.112 211.475,543.6519999999999 234.475,573.7959999999999C234.475,573.7959999999999 274.052,542.367 276.142,539.4459999999999C288.808,521.7439999999999 287.475,411.1109999999999 293.142,386.1109999999999C295.604,375.24599999999987 297.642,365.11199999999985 297.642,365.11199999999985C279.475,325.7789999999999 259.306,257.71599999999984 254.985,242.47299999999984C252.142,232.44599999999983 234.80900000000003,214.11199999999985 226.476,203.77899999999983C226.476,203.77899999999983 204.949,201.88699999999983 191.817,205.80399999999983C175.143,210.77799999999985 155.143,232.44499999999985 155.143,232.44499999999985C170.807,268.446 168.477,263.648 170.141,271.113Z" id="PaS" transform="matrix(11.488640785217283,0,0,11.59385108947754,12577.2,2594.5)" style="opacity:0.5;stroke:none;fill:#173660;fill-opacity:1;stroke-opacity:1;stroke-width:1;stroke-miterlimit:3;stroke-linecap:none;stroke-linejoin:round;"/>
</svg>

Hi @iangilman thank you again for your help on my last issue with the overlay plugin. I am now running into an issue with tileSource sizing to circumvent the Firefox SVG issue other's have mentioned.

In a prototype of the application I am trying to create I am able to use this code

var viewer = OpenSeadragon({ id: 'a6', prefixUrl: 'https://openseadragon.github.io/openseadragon/images/', tileSources: { tileSource: './7045-A7-NEUN.dzi', width: 1000, } });

Specifically you can see in the TileSources I am able to set a tileSource property with the url and a width related to the tileSource. This allows me to multiply my svgOverlay width and height by 1000 and it fixes the issue with Firefox.

var d3Svg = d3.select(overlay.node()) .append("svg:image") .attr("xlink:href", "./7045-A7-NEUN.svg") .attr("width", 1000) .attr("height", ratioComputedHeight * 1000) })

When I attempt to utilize the same tileSource formatting in my React application I receive this error

No TileSource was able to open undefined [object Object]

Setting the width of the tileSource in my sample application was a huge breakthrough for getting Firefox to work with the SVG but now I'm unable to replicate that in my application.

Any help you can offer would be greatly appreciated, thank you in advance!

Hi. I love openseadragon and have created loads of images. As the lower levels are so small I only included levels 8 and above but this works great using the minLevel option to prevent them being loaded. However on internet explorer 11 (and possibly others?) a warning is generated that tile /1/0_0.jpg doesnt exist. Everything works properly from a user pov but the apache logs fill up really fast. Is there any way to prevent this? thank you in advance.

Edit: Cant seem to delet this, but have now posted a new issue in the openseadragon repository, which is presumably the right place

Hi!

First off - awesome job on these libraries - I massively enjoy working with it.

I was playing around with the library to make annotations on a scanned histology slide, and realized that the y-dimension was slightly off on everything I drew, and more off the further down on the image I made the annotations. The x-dimension was fine.

I believe this may be related to/similar effect of a bug I filed at msalsbery/OpenSeadragonImagingHelper#4 .
In essence, I suspect the scaling is made entirely on basis of one dimension - namely the x-dimension. When the image is non-square this causes problems.

On my 1920x1080 (full) screen the drawing group gets scaled by 1297.35 and not the 1080 as expected (height being the limiting dimension for containing the image within the window). 1080 / 1297.35 (=0.8325) also equals the ratio of height-to-width of the dimensions of the source image.

Please let me know if I'm doing things wrong here - that may very well be! My js is a bit rusty to say the least (-;

Hi,
I'm quite new to OpenSeadragon so I'm currently trying to set up a small example page with OpenSeadragon and SVG-Overlay to gain better understanding of it. Applying an overlay with d3 (like the one on the example page) works just as it should.
But the overlay does not show at all when I try and load a external file. It is correctly loaded and appended to the <g>-Element as seen here:

<svg style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" width="721" height="966">
  <g transform="translate(36.0480700651691,64.99999999999946) scale(618.7738610903659) rotate(0)">
    <svg width="200" height="600" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green"></circle>
    </svg>
  </g>
</svg>

I accidentally dragged and dropped the inner <svg>-Node out of the <g>-Element and then it suddenly displayed the overlay, but of course it won't zoom and pan with the image like that. I tried the same with larger, more complex SVG-Files from across the internet and they all behave the same.

Do you have any idea what I am doing wrong or what is causing this. There must be something I overlooked because the SVGs all seem to be OK...

Thanks in advance for any help!