Grouping in SVG links

[zonky2]

Hi,
I have several links in an SVG that should display HTML texts in the lightbox.

The display works, but I am not able to build in a grouping for one before <--> back.

The code looks something like this:

...
    <g>
    	<title>more...</title>
	    <a xlink:href="#text_1" class="colorbox_content xyz" data-cbox="lb1234">
	        <rect x="29.248" y="1311.749" fill="none" width="1014.101" height="282.029"/>
	    </a>
	</g>
    <g>
    	<title>more...</title>
	    <a xlink:href="#text_2" class="colorbox_content xyz" data-cbox="lb1234">
	        <rect x="29.248" y="1032.723" fill="none" width="774.078" height="279.026"/>
	    </a>
	</g>
...

any text blocks

<div class="colorbox_container" style="display:none;">
	<div id="text_1" style="margin: 20px;">
		<div>Text 1....</div>
	</div>
</div>
<div class="colorbox_container" style="display:none;">
	<div id="text_2" style="margin: 20px;">
		<div>Text 2....</div>
	</div>
</div>
...

and jQuery

<script>
$(document).on('click', '.colorbox_content', function(event){
    event.stopPropagation();
    event.preventDefault();
    var xhref = $(this).attr('xlink:href');
    var rel   = $(this).attr('data-cbox')
    $.colorbox({
    	maxWidth: '95%',
        maxHeight: '95%',
        opacity: '0.5',
    	inline: true,
    	rel: rel,
    	href: xhref,
    });
});
</script>

[jackmoore]

Hi, sorry about the late reply, I've been traveling. You should be able to use the SVG elements like you would any other DOM element. Does this work?

$('.colorbox_content').colorbox({
    	maxWidth: '95%',
        maxHeight: '95%',
        opacity: '0.5',
    	inline: true,
    	rel: function(){ return $(this).attr('xlink:href') },
    	href: function(){ return $(this).attr('xlink:href') },
});

[zonky2]

no, unfortunately this does not work 😞

I have only a svg element