如何使用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

希望這可以幫助 ！