SVG（1.1）：如何在浏览器中“链接到”或“居中”形状？

Question

是否有浏览器无关的方式让浏览器以特定形状为中心（通过'id'属性）？

我已经采用的XLink周围形状缠绕这样的尝试：

<a xlink:href="#node24"> .... </a> 

我有合理忙（100+形状）向图的图（从点生成）：当我在铬装载它们，更通常情况下，初始屏幕只是空白 - 迫使用户使用滚动条来查找图表。

Answer 1

我怕我没有任何好消息告诉你。

对于独立的SVG文档，您可以通过链接到<view> element（不同于SVG“viewBox”属性，但使用SVG“viewBox”属性）来操作链接后显示的SVG部分。 view元素指定要使用的viewBox以及可能的其他参数，并且将使用这些参数而不是默认参数来显示图形。

示例代码：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 100 100" 
    preserveAspectRatio="xMidYMin meet" > 

    <circle cx ="50" r="40"/> 

    <view id="panUp" viewBox="0 -50 100 100" /> 

    <view id="zoomIn" viewBox="25 25 50 50" /> 

</svg> 

如果您链接到文件作为一个整体它会显示你的一半在屏幕的上方为中心的圆形的图像。

但是，如果您像http://example.com/sample.svg#panUp那样链接到它，圆圈的大小将会相同，但会集中在屏幕上。如果您链接到http://example.com/sample.svg#zoomIn，则只能看到两倍大的圆的底部边缘。

（我没有任何地方托管可以提供原始SVG文件的文件，但this CodePen使用数据URI来显示效果，尽管数据URI片段标识符在Firefox中似乎不起作用。

您是应该能够甚至指定所需的视框，转换或其他属性作为URL片段的一部分（如http://example.com/sample.svg#myView(viewBox(0,0,200,200))），但我不认为这广泛实现 - 它没有对Firefox或Chrome都有影响。

甚至<view>当SVG嵌入HTML文档中时，片段似乎不起作用。因此，除非您的SVG是独立的，否则为每个元素创建一个视图（或者您动态更改以匹配点击的元素的视图）不会太麻烦。

那么什么工作？

默认行为，链接到片段（元件ID），当这不是一个<view>是显示包含该元素（“最近的祖先”，因为一个SVG可以包含嵌套<svg>标签）的最近的祖先<svg>元件。因此，如果文档具有自然结构，则可以用指定的x，y，高度和宽度参数替换一些<g>元素与<svg>，然后链接到该子图形内的元素将显示该视图。即使SVG嵌入到更大的HTML文档中，也应该可以工作。但是如果你有数百个元素在四处移动，这可能不是一个实际的解决方案。

这留下@ Ian的解决方案，以编程方式操纵主SVG viewBox。如果您不想放大，只需平移，将宽度和高度保留为可视化的全尺寸，然后更改x和y偏移。就像：

function centerViewOnElement(el) { 
    var bbox = el.getBBox() 
    var elCenterX = bbox.x + bbox.width/2, 
     elCenterY = bbox.y + bbox.height/2; 

    svg.setAttribute("viewBox", [(elCenterX - width/2), 
           (elCenterY - height/2), 
           width, 
           height 
           ].join(" ") ); 
    //assuming you've got the svg, width and height already saved in variables... 
} 

Answer 2

想过我会做一个简单的例子，因为这感觉一般非常有用...用的jsfiddle here

<svg id="mySvg"> 
    <circle id="myCirc" cx="20" cy="20" r="20"/> 
    <rect id="myRect" x="50" y="50" width="50" height="50"/> 
</svg> 

var mySvg = document.getElementById("mySvg"); 

function getNewViewbox(el) { 
    var bbox = el.getBBox(); 
    return newViewbox = bbox.x + " " + bbox.y + " " + bbox.width + " " +  bbox.height; 
} 

function focusElement(ev) { 
    ev.stopPropagation(); 
    mySvg.setAttribute("viewBox", getNewViewbox(ev.target));  
} 

//click on any element, or even the svg paper 
document.getElementById("mySvg").addEventListener("click", focusElement);