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 :disappointed:

I have only a svg element