0

I have a graphic button SVG into which I want to programmatically embed another SVG. The button has a small panel for the embedded SVG, with an arrow overlying it. I want the embedded SVG to be on top of the panel, but under the button. Here's what I have so far: Button:

<svg id="pic-arrow-prototype" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 5 7"
    width="200px" >
    <defs></defs>
    <g id="layer0">
        <path d="M2.5 0.2H4.6A0.2 0.2 0 0 1 4.8 0.4V3.65A0.4 0.4 0 0 1 4.6 4L2.5 5L0.4 4A0.4 0.4 0 0 1 0.2 3.65V0.4A0.2 0.2 0 0 1 0.4 0.2H2.5z" fill="transparent" stroke-width="0.16" stroke="rgb(128,128,128)" ></path>
    </g>
    <g id="layer1" transform="scale(1.25,1.25) translate(-0.5,-0.5)">
        <circle class='arrow-active' cx='2.5' cy='4.2' r='1.5' fill="white" stroke-width="0.2" stroke="rgb(102,102,102)" />
        <circle class="arrow-dot" cx="2.5" cy="4.2" r="1.2" fill="rgb(102,102,102)" stroke-width="0.067" stroke="rgb(152,152,152)"/>
        <path class="arrow" d="M2.5 3.25L3.45 4.5L3.3 4.75L2.5 4L1.7 4.75L1.55 4.5z" fill="rgb(255,255,255)" stroke-width="0" />
        
    </g>
</svg>

SVG to be embedded:

<svg id="rBullseye" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 10"
    width="200px" style="display:none;" >
    <defs></defs>
    <g id="layer0">
        <path
            d="M 5 0 A 5 5 0 1 1 4.999 0z M 5 2 A 3 3 0 1 1 4.999 2z M 5 4 A 1 1 0 1 1 4.999 4z"
            fill="#000000" stroke="none" fill-rule="evenodd"></path>
    </g>
    <g id="layer1">
        <path
            d="M 5 2.5 A 2.5 2.5 0 1 1 4.999 2.5z M 5 3.5 A 1.5 1.5 0 1 1 4.999 3.5z M 5 4.5 A 0.5 0.5 0 1 1 4.999 4.5z"
            fill="#000000" stroke="none" fill-rule="evenodd"></path>
    </g>
</svg>

JQuery attempt (fail):

$('#pic-arrow-prototype').clone().appendTo('#scrollLinkDiv').css({
        position: 'absolute',
        width: '100%',
        left: '0px',
        top: '0px',
        id: 'upArrowPic'
    });
    $('#rBullseye').clone().appendTo('#layer0').css({
      
      position: 'absolute',
      width: '80%',
      left: '10%',
        top: '5px',
    }).show();
Dinsdale Trelawney
  • 37
  • 6

1 Answers1

0

Wow, I made many mistakes here, principally confusing css with svg attributes. I have now achieved the embedding:

$('.pic-arrow-prototype').clone().appendTo('#scrollLinkDiv').attr({
          id: 'upArrowPic',
          class: 'pic-arrow',
        }).css({
            width: '100%',
            left: '0px',
            top: '0px',
        });
    var upArrowPanel = $('#upArrowPic').find('g')[0];
        $('#rJCCDots').clone().appendTo(upArrowPanel).attr({
            width: '80%',
            height: '100%',
            x: '10%',
            y: '0',
        }).show();
Dinsdale Trelawney
  • 37
  • 6