SVG (1.1)：如何在浏览器中的形状上“链接到”或“居中”？

Question

是否有独立于浏览器的方式让浏览器以特定形状为中心（通过“id”属性）？

我尝试过使用围绕如下形状的 xlink：

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

我有相当繁忙的（100 多种形状）有向图（从点生成）：当我在 Chrome 中加载它们时，通常初始屏幕只是空白 - 迫使用户使用滚动条来查找图表。

Answer 1

恐怕我没有什么好消息要告诉你。

对于独立的 SVG 文档，您可以通过链接到 <view> element（与 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 片段标识符似乎不起作用火狐。）

您应该能够将所需的 viewBox、变换或其他属性指定为 URL 片段的一部分（如 http://example.com/sample.svg#myView(viewBox(0,0,200,200))），但我认为这并未得到广泛实施-- 它对 Firefox 或 Chrome 都没有影响。

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

那么有什么作用呢？

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

这留下了@Ian 以编程方式操作主 SVG 视图框的解决方案。如果您不想放大，只需平移，将宽度和高度保留为可视化的完整大小，然后更改 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);