search

openseadragon / svg-overlay

An OpenSeadragon plugin that adds SVG overlay capability.
BSD 3-Clause "New" or "Revised" License
58 stars 28 forks source link

Simplest use case: SVG file/text #40

Closed darwinjob closed 3 years ago

darwinjob commented 3 years ago

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>
darwinjob commented 3 years ago

Ha! I got it figured! For noobs like I'm here's very short and simple code, requires no extra libraries: svg_overlay.txt

There's something wrong with the Github code formatter so I had to place the code as the attachment.

iangilman commented 3 years ago

I'm glad you got it figured out! BTW, to format multiple lines of code in a GitHub comment, use ``` on its own line before and after your code block. I've updated your original post to use that.

msalsbery commented 3 years ago

BTW, to format multiple lines of code in a GitHub comment, use ``` on its own line before and after your code block.

Even better, before the code block use “```javascript” without the quotes for syntax highlighting! ;)

darwinjob commented 3 years ago 

<div id="openseadragon1" />
<script src="openseadragon.min.js"></script>
<script type="text/javascript">

var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "images/",
        tileSources: "pyramid.dzi"
});

var svg_overlay = document.createElement("div");
svg_overlay.id = "svg-overlay";

viewer.addOverlay({
        element: svg_overlay,
        location: new OpenSeadragon.Rect(0, 0, 1, 1)
});

fetch("annotation.svg")
        .then(r => r.text())
                .then(text => svg_overlay.innerHTML = text);
</script>
iangilman commented 3 years ago

Lovely :)