How to link to a document element's ID from an inline SVG?

[ejaa3]

Suppose in the document doc.md I have:

# Section {#my-section}

![](img.svg){.inline-svg}

And the file img.svg contains:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
	<rect width="96" height="96" fill="darkblue"/>
	<text fill="white" x="16" y="32">
		<a href="https://google.com">First</a>
	</text>
	<text fill="white" x="16" y="64">
		<a href="#my-section">Second</a>
	</text>
</svg>

However, when running pandoc --embed-resources doc.md the HTML output is:

<h1 id="my-section">Section</h1>
<p><svg id="svg_37fa35013cae0cc3c538" role="img" width="96" height="96" viewBox="0 0 96 96">
        <rect width="96" height="96" fill="darkblue" />
        <text fill="white" x="16" y="32">
                <a href="https://google.com">First</a>
        </text>
        <text fill="white" x="16" y="64">
                <a href="#svg_37fa35013cae0cc3c538_my-section">Second</a>
        </text>
</svg></p>

The first <a/> is fine, but the second one redirects to #svg_37fa35013cae0cc3c538_my-section instead of #my-section.

[rnwst]

It seems pandoc assumes that all Ids in the SVG only reference elements within that SVG, and so prefixes the Ids with a hash to prevent any potential clashes with Ids in the document. You could avoid this by embedding the SVG yourself using a Lua filter. Let me know if you need help with this.