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

Question

我正在尝试使用raphael.js创建可点击的甜甜圈图。 通过单击形状，窗口应滚动到锚点。 我设法打开一个新窗口，但无法按要求完全运行它。

例

<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

使用location.hash = "some-anchor"; 而不是window.open()

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

样品：

 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

昨天我正在处理这种确切的情况。 我最终使用了下面的代码，因此我不必将元素包装在锚定标记中。

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

jQuery解决方案，但是location.hash只是普通的JS。

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

希望这可以帮助 ！