Creating a menu of linked options on a Scalable Vector Graphic via HTML

75 views Asked by At

I designed a Scalable Vector Graphic using Inkscape on o/s X Yosemite and subsequently saved the SVG as a HTML document and received the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Make Austerity History</title>
</head>
<body>
    <canvas id='canvas' width='800' height='600'></canvas>

    <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var myString = String.format('Hello World {0} {1}', value1,     
    value2);
// #layer1

// #rect3362
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.rect(0.000000, 0.000000, 800.000000, 140.000000);
    ctx.fill();

// #rect3364
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.rect(0.000000, 140.000000, 180.000000, 460.000000);
    ctx.fill();

// #layer2

// #rect3367
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.rect(0.000000, 140.000000, 220.000000, 460.000000);
    ctx.fill();

// #rect3391
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 102, 0, 0.8)';
    ctx.rect(0.000000, 140.000000, 240.000000, 460.000000);
    ctx.fill();

// #add menu bar

// #rect3341
    ctx.beginPath();
    ctx.fillStyle = 'rgba(0, 0, 255, 0.8)';
    ctx.rect(240.000000, 140.000000, 560.000000, 460.000000);
    ctx.fill();

// #layer3

// #rect3370
    ctx.beginPath();
    ctx.fillStyle = 'rgba(249, 249, 249, 0.8)';
    ctx.rect(0.000000, 0.000000, 800.000000, 140.000000);
    ctx.fill();
    ctx.;

    </script>
</body>
</html>

I wish to place a series of links to other pages on the left hand side which is colored orange. (I believe that's #rect3391) But, how do I work around the script?

I use Bluefish to code HTML.

0

There are 0 answers