在 SVG 对象中添加节点导航答案

【问题标题】：Add node navigation inside a SVG object在 SVG 对象中添加节点导航
【发布时间】：2015-06-19 13:43:20
【问题描述】：

我想在 SVG 文件中从一个对象/节点平滑地导航到另一个对象/节点。为此，我使用了 javascript 库：http://flesler.blogspot.de/2009/06/jqueryserialscroll-122-released.html，它似乎工作正常。问题是，该库似乎仅适用于在 <.svg> 对象之外定义的引用（#nodeId）链接，如果我在 svg 节点内的对象上使用引用链接，它将不正确，这意味着它不会平滑滚动到定义的节点 ID。示例（示例将与引用的 javascript 库一起正常工作）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: SR_GLO_Main Pages: 1 -->

<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery.scrollTo.min.js"></script>
	<script type="text/javascript" src="./js/jquery.localScroll.js"></script>
	<script type="text/javascript">
		jQuery(function( $ ){
			/**
			 * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
			 * @see http://demos.flesler.com/jquery/scrollTo/
			 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.localScroll.
			 */
			
			// The default axis is 'y', but in this demo, I want to scroll both
			// You can modify any default like this
			$.localScroll.defaults.axis = 'xy';
			
			/**
			 * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
			 * also affect the >> and << links. I want every link in the page to scroll.
			 */
			$.localScroll({
				//target: '#content', // could be a selector or a jQuery object too.
				queue:true,
				duration:1000,
				hash:true,
				lazy:true,
				onBefore:function( e, anchor, $target ){
					// The 'this' is the settings object, can be modified
				},
				onAfter:function( anchor, settings ){
					// The 'this' contains the scrolled element (#content)
				}
			});
		});

</script>
</head>
<body>

<a href="#node1">Section 1</a>

<svg width="3249pt" height="2200pt" viewBox="0.00 0.00 3249.00 2200.00" >

<g id="nodeX">
 <a xlink:href="#node1">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 </a>
 </g>

 <g id="node1">
 <circle cx="1880" cy="1580" r="40" stroke="green" stroke-width="4" fill="red" />
 </g>
 
</svg>

</body>

因此，当单击“第 1 节”时，html 将以平滑过渡到红色圆圈（id 为 node1）为中心，但是当您按下黄色圆圈时，该圆圈也具有指向 #node1 的链接引用，但某些内容无法正常工作并且html 没有重点。我想让它成为按“第 1 节”时的行为
谢谢

【问题讨论】：

标签： javascript jquery html svg

【解决方案1】：

经过一番调查，我想出了一些解决方案。因此，要在 SVG 中从一个子节点导航到另一个子节点，我们可以：
1. 在包含 SVG 节点的 html 文件中使用 ecmascript。我们需要使用它与 SVG 元素进行交互。要关注特定元素，您需要使用此处描述的“可聚焦”属性：http://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr 可以在此处找到一个很好的示例：http://www.w3.org/TR/SVGTiny12/examples/navigation.svg 使用“TAB”，您可以从一个菜单导航到另一个菜单。但这似乎不能正常工作，似乎没有浏览器支持这种方式的导航焦点。所以我认为将来当浏览器支持它时，我们可以轻松使用它。
同时我们可以使用解决方案 2
2。使用上面的 javascript 库从一个节点导航到另一个节点。我为此添加的修改：

<script type="text/javascript">
		jQuery(function( $ ){
			/**
			 * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
			 * @see http://demos.flesler.com/jquery/scrollTo/
			 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.localScroll.
			 */
			
			// The default axis is 'y', but in this demo, I want to scroll both
			// You can modify any default like this
			$.localScroll.defaults.axis = 'xy';
			
			$.localScroll({
				//target: '#content', // could be a selector or a jQuery object too.
				queue:true,
				duration:1000,
				hash:true,
				lazy:true,
				onBefore:function( e, anchor, $target ){
					// The 'this' is the settings object, can be modified
				},
				onAfter:function( anchor, settings ){
					// The 'this' contains the scrolled element (#content)
				}
			});
			
			$('#nodeX').click(function() {
				$('html, body').scrollTo(document.getElementById('node1'), 1000);
			});
		});

</script>

【讨论】：