我有一个又高又宽的 svg,由 graphviz 生成。
如果我用浏览器打开 svg,我可以搜索 文本和焦点将移动以显示所需的文本。
我希望通过放置链接来模拟这种行为 到 html 文件中的 svg 片段。所以如果我有 file.svg 含有
<g id="sought"><text>goes here</text></g>
该链接看起来像 <a href="file.svg#sought">
。
这没有达到预期的效果。
实验表明 svg 文件的链接 包含
<rect id="sought" />
will 使
浏览器将焦点移动到相关的矩形。
我很感激我可能在这里要求不可能的事情, 但如果有一个答案不涉及改变 svg 我想听听。
最小示例如下:
pic.svg
<?xml version="1.0"
encoding="UTF-8"
standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="6000" height="6000" y="0" x="0">
<rect id="black" fill="black" height="100" width="100" y="50" x="5500" />
<text y="50" x="5500">black</text>
<rect id="red" fill="red" height="100" width="100" y="5500" x="5500" />
<text y="5500" x="5500">red</text>
<g id="green">
<rect fill="green" height="100" width="100" y="5500" x="50" />
<text y="5500" x="50">green</text>
</g>
</svg>
svglink.html
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body
{
width: 20em;
height: 10em;
text-align: left;
}
</style>
</head>
<body >
<span>links to pic.svg: </span>
<ul>
<li><a href="pic.svg#red">red rect</a></li>
<li><a href="pic.svg#green">green group</a></li>
</ul>
</body>
</html>
请注意:
跟随
red rect
链接会显示 pic.svg 中的红色矩形。
跟随
green group
链接不会显示组中包含的绿色矩形
浏览 pic.svg 时按 ctrl-f red|green|black 可根据需要将焦点转移到文本。
这很可能是设计使然,但我还没有找到任何文档 为此。
修改 html,也许可以编写一个按钮来显示组?
将 svg 嵌入页面即可运行 所以有一个链接到
embeddedsvg.html#red
<ul>
<li><a href="#red">red rect</a></li>
<li><a href="#green">green group</a></li>
</ul>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="6000" height="6000" y="0" x="0">
<rect id="black" fill="black" height="100" width="100" y="50" x="5500" />
<text y="50" x="5500">black</text>
<rect id="red" fill="red" height="100" width="100" y="5500" x="5500" />
<text y="5500" x="5500">red</text>
<g id="green">
<rect fill="green" height="100" width="100" y="5500" x="50" />
<text y="5500" x="50">green</text>
</g>
</svg>