Question

我有一个SVG图像，有很多形状，大多是矩形。其中每个都有缩略图，标题文本和与之关联的鼠标悬停工具提示。

然而，对于图像和标题，“关联”只是由我将它们定位在相关形状上而引起的视觉效果。

如果用户点击一个形状，事件处理程序如何进行相同的关联，即找到代表图像和字幕的相应元素？

我会天真地期望某种嵌套层次结构，就像HTML一样，但很明显，除了工具提示之外，它在SVG中是非法的，例如。

<style>
text {
    text-anchor: middle;
    font-size: 10px;
    font-weight: bold;
    font-family: "Times New Roman";
    pointer-events: none;
}

rect {
    stroke: black;
    opacity: 0.6;
    stroke-width: 1.5;
    fill: lightblue;
}
</style>

<rect x="50" y="50" height="80" width="80">
<title>Tooltip for rectangle
</title>
<text x="90" y="100" dy="1.1em">Caption L1</text>
<text x="90" y="100" dy="2.2em">Caption L2</text>
<image x="51" y="51" width="78" height="50" xlink:href="https://example/thumbnail.jpg"/>
</rect>

有没有一种有效的方法来实现这一目标？每个元素都必须具有显式的id或class属性，还是必须将每个实例作为一个不同的组放入defs部分？可能有数百种这样的形状。

Answer 1

此解决方案由Robert Longson提供。我只是明确说明其他人有相同的要求。

<g id="test">
<rect x="50" y="50" height="80" width="80">
<title>Tooltip for rectangle</title>
</rect>
<text x="90" y="100" dy="1.1em">Caption L1</text>
<text x="90" y="100" dy="2.2em">Caption L2</text>
<image x="51" y="51" width="78" height="50" xlink:href="https://example/thumbnail.jpg">
<title>Tooltip for image</title>
</image>
</g>

这似乎保留了单独元素上的工具提示和事件处理，并提供了一个提供语义分组的单个封闭元素（具有不同的id）。

形状与文本或图像之间的语义关系

1 个答案: