如何使用JavaScript与SVG图形一起定位锚点

Question

I am trying to create a clickable donut chart with raphael.js. By clicking on a shape the window should scroll to an anchor. I worked it out to open a new window but I not able to run it fully as required.

Example

<script type="text/javascript">
var paper = Raphael(document.getElementById("chart"), "525", "306")
var shape_right = paper.path("M265 14l0 79c10 0 20 3 30 8 29 16 38 53 22 81l68 39c13-22 19-44 19-69C403 76 341 14 265 14z");
var shape_bottom = paper.path("M314 186c-16 28-52 38-81 21 -9-5-17-13-22-22l-68 39c13 22 29 38 51 50 66 38 150 16 188-49L314 186 314 186z");
var shape_left = paper.path("M209 123c11-19 31-30 52-30l0-79c-25 0-47 6-69 19C126 71 103 156 141 222l68-40C199 165 198 142 209 123z");
eshape_right.attr("stroke-width", "0");
shape_right.attr("fill", "#ffffff");
shape_right.attr("opacity", 0.0);
shape_bottom.attr("stroke-width", "0");
shape_bottom.attr("fill", "#ffffff");
shape_bottom.attr("opacity", 0.0);
shape_left.attr("stroke-width", "0");
shape_left.attr("fill", "#ffffff");
shape_left.attr("opacity", 0.0);
shape_right.mouseover(function(e){
document.body.style.cursor = "pointer";
    shape_bottom.attr("opacity", 0.5);
    shape_left.attr("opacity", 0.5);
});
shape_right.click(function(e){
    window.open("http://www.example.com#anchor1");
});
shape_right.mouseout(function(e){
    document.body.style.cursor = "auto";
    shape_bottom.attr("opacity", 0.0);
    shape_left.attr("opacity", 0.0);
});
shape_bottom.mouseover(function(e){
    document.body.style.cursor = "pointer";
    shape_right.attr("opacity", 0.5);
    shape_left.attr("opacity", 0.5);
});
shape_bottom.click(function(e){
    window.open("http://www.example.com#anchor2");
});
shape_bottom.mouseout(function(e){
    document.body.style.cursor = "auto";
    shape_right.attr("opacity", 0.0);
    shape_left.attr("opacity", 0.0);
});
shape_left.mouseover(function(e){
    document.body.style.cursor = "pointer";
    shape_right.attr("opacity", 0.5);
    shape_bottom.attr("opacity", 0.5);
});
shape_left.click(function(e){
    window.open("http://www.example.com#anchor3");
});
shape_left.mouseout(function(e){
    document.body.style.cursor = "auto";
    shape_right.attr("opacity", 0.0);
    shape_bottom.attr("opacity", 0.0);
});
</script>

Answer 1

Use location.hash = "some-anchor"; instead of window.open()

shape_right.click(function(e){
    location.hash = "anchor1";
});

Sample:

 var paper = Raphael(document.getElementById("chart"), "525", "306") var shape_right = paper.path("M265 14l0 79c10 0 20 3 30 8 29 16 38 53 22 81l68 39c13-22 19-44 19-69C403 76 341 14 265 14z"); var shape_bottom = paper.path("M314 186c-16 28-52 38-81 21 -9-5-17-13-22-22l-68 39c13 22 29 38 51 50 66 38 150 16 188-49L314 186 314 186z"); var shape_left = paper.path("M209 123c11-19 31-30 52-30l0-79c-25 0-47 6-69 19C126 71 103 156 141 222l68-40C199 165 198 142 209 123z"); shape_right.attr("stroke-width", "0"); shape_right.attr("fill", "#ffffff"); shape_right.attr("opacity", 0.0); shape_bottom.attr("stroke-width", "0"); shape_bottom.attr("fill", "#ffffff"); shape_bottom.attr("opacity", 0.0); shape_left.attr("stroke-width", "0"); shape_left.attr("fill", "#ffffff"); shape_left.attr("opacity", 0.0); shape_right.mouseover(function(e) { document.body.style.cursor = "pointer"; shape_bottom.attr("opacity", 0.5); shape_left.attr("opacity", 0.5); }); shape_right.click(function(e) { location.hash = "anchor1"; }); shape_right.mouseout(function(e) { document.body.style.cursor = "auto"; shape_bottom.attr("opacity", 0.0); shape_left.attr("opacity", 0.0); }); shape_bottom.mouseover(function(e) { document.body.style.cursor = "pointer"; shape_right.attr("opacity", 0.5); shape_left.attr("opacity", 0.5); }); shape_bottom.click(function(e) { location.hash = "anchor2"; }); shape_bottom.mouseout(function(e) { document.body.style.cursor = "auto"; shape_right.attr("opacity", 0.0); shape_left.attr("opacity", 0.0); }); shape_left.mouseover(function(e) { document.body.style.cursor = "pointer"; shape_right.attr("opacity", 0.5); shape_bottom.attr("opacity", 0.5); }); shape_left.click(function(e) { location.hash = "anchor3"; }); shape_left.mouseout(function(e) { document.body.style.cursor = "auto"; shape_right.attr("opacity", 0.0); shape_bottom.attr("opacity", 0.0); }); 

 div#chart { width: 525px; height: 306px; margin: 30px auto; background-image: url("http://www.andreboeck.de/piechart/images/chart.png"); background-position: center; background-repeat: no-repeat; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script> <h1>Click on Chart Shapes to Jump to Anchor</h1> <div id="chart"></div> <h3><a name="anchor1"></a>Lorem Ipsum 1</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p> <h3><a name="anchor2"></a>Lorem Ipsum 2</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <h3><a name="anchor3"></a>Lorem Ipsum 3</h3> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 

Answer 2

I was dealing with this exact situation yesterday. I ended up using the code below so i didn't have to wrap my elements in anchor tags.

$('#idOfButton').click(function() {
     location.hash = 'idOfAnchorPoint';
});

jQuery solution but location.hash is just regular JS.

http://www.w3schools.com/jsref/prop_loc_hash.asp

Hope this helps !