Create anchor link to ID in SVG loaded by object tag

26 Views Asked by At

I want to create links to jump across an SVG. So I placed some ID's on the objects in the SVG I want to jump to and added some A tag elements linking to those ID's. This works when the SVG is inline, but when I use the Object tag to load the SVG it doesn't work. This makes sense because the object tag loads the SVG as a separate document in the main document.

Some code describing the scenario:

[some-html]
<object type="image/svg+xml" data="/somesvg.svg"></object>
[more-html]
<a href="#id-somewhere-in-the-svg">Jump to #id-somewhere-in-the-svg</a>

And some in the SVG:

<a id="id-somewhere-in-the-svg" xlink:href="...">
            <g id="some-id">
                <path d=...

For now, I solved the problem using Javascript, but I would like to know if there's a pure HTML solution.

0

There are 0 best solutions below