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";
});

样品：

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

昨天我正在处理这个确切的情况。我最终使用下面的代码，所以我没有必要将我的元素包装在锚标签中。

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

jQuery解决方案，但location.hash只是常规JS。

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

希望这有帮助！

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

2 个答案: