Question

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

我尝试过使用包含这样形状的xlinks：

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

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

Answer 1

我想我会做一个更简单的例子，因为这对一般来说非常有用...用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);

Answer 2

我担心我没有任何好消息。

对于独立的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中工作。）

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

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

那么有什么用？

当链接到不是<view>的片段（元素id）时，默认行为是显示包含该元素的最近祖先<svg>元素（“最近的祖先”，因为SVG可以包含嵌套的<svg>标记）。因此，如果您的文档具有自然结构，则可以使用指定的x，y，height和width参数将<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... }

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

2 个答案: