1

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

我尝试过使用围绕这样的形状包裹的 xlinks：

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

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

4

2 回答 2

1

以为我会做一个更简单的例子，因为这感觉一般来说非常有用......这里有一个jsfiddle

<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);
于 2014-03-07T11:02:01.360 回答
1

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

对于独立的 SVG 文档，您可以通过链接到<view>元素（与 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 文件的文件，但是这个 CodePen使用数据 URI 来显示效果，尽管数据 URI 片段标识符似乎在 Firefox 中不起作用。）

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

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

那么有什么作用呢？

当链接到不是 a 的片段（元素 id）时，默认行为<view>是显示<svg>包含该元素的最近的祖先元素（“最近的祖先”，因为 SVG 可以包含嵌套<svg>标签）。因此，如果您的文档具有自然结构，您可以使用指定的 x、y、高度和宽度参数替换某些<g>元素<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...
}
于 2014-03-09T05:35:48.210 回答