When the page loads, the "front side" of the business card is displayed (by default). It is generated like this:

<div id="SVG_canvas" width="93mm" height="53mm"> <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="93mm" height="53mm"> <color-profile name="acmecmyk" xlink:href="http://printers.example.com/acmecorp/model1234" /> <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="none" fill-opacity="0.0" /> <g id="square"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> </g> <use xlink:href="#square" transform="scale(2)" /> <text x="20" y="55" font-family="Verdana" font-size="43pt" id="hello">Hello World!</text> <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text> </svg> </div>

When you click on the "Reverse" of the business card, on the same page , another div should be displayed:

 <div id="SVG_canvas1" width="93mm" height="53mm"> <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="93mm" height="53mm"> <color-profile name="acmecmyk" xlink:href="http://printers.example.com/acmecorp/model1234" /> <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="none" fill-opacity="0.0" /> <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text> </svg> </div>

And there are two buttons - "Front" and "Reverse", which allow you to switch between these divs:

 <div id="buttons"> <button id="front" class="btn btn-warning">Лицевая сторона</button> <button id="rear" class="btn btn-warning">Обратная сторона</button> </div>

Can you please tell me how to do this? That is, you need some kind of solution similar to tabs, but tabs will not work here, you just need to use buttons to switch SVG canvas.

    1 answer 1

    If you do not hesitate jquery then try to do so .

     $(document).ready(function () { $('#SVG_canvas1').hide(); $("#front").click(function () { $('#SVG_canvas1').hide(); $('#SVG_canvas').show(); }); $("#rear").click(function () { $('#SVG_canvas').hide(); $('#SVG_canvas1').show(); }); });​

    -

     <div id="SVG_canvas" width="93mm" height="53mm"> <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="93mm" height="53mm"> <color-profile name="acmecmyk" xlink:href="http://printers.example.com/acmecorp/model1234" /> <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="none" fill-opacity="0.0" /> <g id="square"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> </g> <use xlink:href="#square" transform="scale(2)" /> <text x="20" y="55" font-family="Verdana" font-size="43pt" id="hello">Hello World!</text> <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text> </svg> </div> <div id="SVG_canvas1" width="93mm" height="53mm"> <?xml version="1.0" encoding="UTF-8" standalone="no" ?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="93mm" height="53mm"> <color-profile name="acmecmyk" xlink:href="http://printers.example.com/acmecorp/model1234" /> <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="none" fill-opacity="0.0" /> <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text> </svg> </div> <div id="buttons"> <button id="front" class="btn btn-warning">Лицевая сторона</button> <button id="rear" class="btn btn-warning">Обратная сторона</button> </div>​
    • Of course, I do not disdain, thank you so much! - spoilt