How to ssign ID to SVG HTML element by wrapping it.

Question

0.00/5 (No votes)

See more:

Hi!

I have an unusually wide page with tenses in https://scienceprojects.lv/tenses

I'm trying to assign an ID to each tense in English so it takes the class to exact tense when I specify a link with anchor. For example, the https://scienceprojects.lv/tenses#pastperfectcontinuous should open the page at exactly to Past Perfect Continuous. So that the students don't have to scroll horizontally.

I know this works well within clean HTML, but in my case I'm trying to assign an ID with an HTML anchor tag to an SVG element by wrapping it around anchor tag.

What I have tried:

By merely wrapping the container with does not work. Neither does span or div.

HTML

<a id="pastperfectcontinuous"><text transform="matrix(1.1 0 0 1 268.9156 437.0796)" data-fancybox data-type="iframe"  href="Tenses/tenses/Past_perfect_continuous.php" class="st21 st22 st23">Past Perfect Continuous</text></a>

Posted 24-Jan-23 2:30am

Liepājas Liedaga vidusskola

Updated 25-Jan-23 9:22am

v11

Add a Solution

3 solutions

Solution 1

The id element here is pastperfectcontinuous but your anchor is for #past-perfect-continuous. Have you tried either:

Removing the hyphens from the anchor (#pastperfectcontinuous)
Adding hyphens to the id attribute (id="past-perfect-continuous")

Remember that the id value and the anchor # need to be exactly the same, otherwise the page won't navigate to it.

Posted 24-Jan-23 2:40am

Chris Copeland

Updated 24-Jan-23 2:41am

v2

Comments

Liepājas Liedaga vidusskola 24-Jan-23 9:22am

Sorry, I have updated my question to make the link and ID correspond. I was playing with both hyphens, underscores or without any signs. While copying, I missed it. It still doesn't work. Thanks for input.

Chris Copeland 24-Jan-23 9:29am

I see, I notice you're using data-fancybox which I believe is a reference to the jQuery lightbox plugin. It's entirely possible that this plugin is changing the DOM structure of your page which means the element could be being affected. Unfortunately I don't know enough about the plugin to make an informed guess but you could try inspecting the HTML elements within your browser (typically right-clicking the element and choosing "Inspect" is enough), and you should be able to see whether the page is the same. Here is an example of the anchor working[^], so the scrolling shouldn't be an issue.

Liepājas Liedaga vidusskola 24-Jan-23 12:38pm

Yeah, but data-fancybox is within <text> tag. While I'm trying to wrap it within .
I've also tried adding it to places without any jQuery. It still fails.

Could that be due to SVG elements and HTML tags within an SVG element? Your example provides HTML only.

Chris Copeland 25-Jan-23 10:33am

I just noticed that the link you provided is an example page, I opened the page and manually appended #pastperfectcontinuous to the end and the browser window did actually navigate to that element, so I don't see the issue?

Liepājas Liedaga vidusskola 25-Jan-23 15:12pm

Can you video it? I've tried both a and g tags. I still have nothing working. Weird.

Solution 2

Everything you always wanted to know about SVG, but decided to come to CP instead:
World Wide Web Consortium (W3C)[^]

Posted 24-Jan-23 7:21am

RedDk

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Liepājas Liedaga vidusskola · Accepted Answer · 2023-01-25T09:22:00

Ok. Discovered the culprits of the issues I was having.

1st issue. My code had a scroll to script that took the user to the center of the horizontal middle of the page.

JavaScript

<script>
function pageScroll() 
{ window.scrollTo(1950,0);} 
</script>

2nd issue. After removing the code in the 1st issue I ran into another issue. Namely, the link worked just once. Once I refresh, it goes away. This was due to I had a link conversion set in .htaccess file which converted my original link https://scienceprojects.lv/tenses to https://scienceprojects.lv/english.php#pastperfectcontinuous

How to ssign ID to SVG HTML element by wrapping it.

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

How to ssign ID to SVG HTML element by wrapping it.

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us