In the process of developing a website, I am using an SVG as the header/navigation. Initially, I embedded the hyperlink text within the SVG like this:
<a xlink:href="">
<text transform="matrix(1 0 0 1 495 160)"
font-family="'Ubuntu'" font-size="22">Contact</text>
</a>
However, upon implementing a jQuery scroll feature, I discovered that it does not work with xlinks.
To resolve this issue, I decided to position the text absolutely to overlay the SVG by adding the following style:
#menu {
position:absolute;
top:25%;
left:60%;
width:100%;
}
I organized the items in a list format:
<ul id="menu">
<li><a id="welcome" href="#tex" title="Welcome">Welcome</a></li>
<li><a id="mission" href="" title="Mission">Mission</a></li>
<li><a id="hyperlinks" href="" title="Hyperlinks">Hyperlinks</a></li>
</ul>
Although I managed to make it work, it is limited to a window width of 1980px because the entire SVG rescales while the text remains static.
While I prefer how the "contact" button adapts to scaling along with the SVG, the smooth scroll effect does not apply to it as shown in this example.
There are two potential solutions for this dilemma: either go back to embedding the text inside the SVG and find a way to enable the scroll effect, or explore methods to ensure the text size and position scale precisely with the underlying SVG (SVG on top of SVG?).
Which approach would you recommend for me to address this issue, and what specific aspects should I focus on?
For the complete code, please refer to this link: http://jsfiddle.net/78eh5u52/9/