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

Question

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

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

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

希望这会有所帮助！