将焦点转移到 svg 中的组元素

问题描述 投票:0回答:1

将焦点转移到 svg 中的组元素

我有一个又高又宽的 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,也许可以编写一个按钮来显示组?

html svg hyperlink
1个回答
0
投票

将 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>

© www.soinside.com 2019 - 2024. All rights reserved.