php - 是否可以在一个 svg 区域中进行两种不同的悬停操作？

Question

我正在学习 SVG 并使用 css 悬停效果来制作一个外观极简的图形，其中的细节会在鼠标悬停时显示。我遇到了一个明显的限制，因为一旦我的 svg 元素中的特定“房地产”部分分配了悬停效果，我就无法想出一种方法来在同一位置使用不同的悬停来放置另一个重叠元素效果。

这是我的图表的图片:

first picture , second picture和 third picture .

第一张图片是没有悬停的极简图表。第二张图片是当一个人将鼠标悬停在其中一个条形图上时——如您所见，每周显示公里数。在第三张图片中，当此人悬停在我的透明矩形(占据图表底部三分之二的整个区域)的任意位置时，会出现 x 轴对周的描述。

我遇到的问题是此设置中的用户可以看到 x 轴或公里值。他们两个都看不见。我想让我的 x 轴出现在鼠标悬停在整个矩形的任何地方。目前，除酒吧区外，它在任何地方都适用。我不希望从鼠标悬停效果中“排除”条形区域!

这是我的简化代码。一周没有骑行公里数时出现“鹅蛋”；为简单起见，我省略了该代码。

    <?php
            //The invisible rectangle and x-axis
            echo "<g class = \"axis\"><rect style = \"fill: pink; opacity: 0;\" width = \"590\" height = \"240\"";
            echo "x =\"0\"";
            echo "y = \"100\"></rect>";
            echo "<text y = \"357\" x = \"";
            echo "20";
            echo "\" dy = \".35em\">";
            echo "<tspan x = \"22\">Week 0</tspan><tspan x = \"92\">Week 1</tspan><tspan x = \"162\">Week 2</tspan><tspan x = \"232\">Week 3</tspan><tspan x = \"302\">Week 4</tspan><tspan x = \"372\">Week 5</tspan><tspan x = \"442\">Week 6</tspan><tspan  x = \"512\">Week 7</tspan>";
            echo "</text>";
            echo "</g>";

               //displays bars with kilometers and km value mouseover
               for ($i = 0; $i < 8; $i++) {
                ?>
                <g class="bar">
                <rect width="60" height="<?php echo round($sums_for_tabletest[$i]); ?>" x="<?php echo (20 + ($i * 70)); ?>"
                      y="<?php echo(340 - round($sums_for_tabletest[$i])); ?>"></rect>
                <?php

                echo "<text y=\"";
                echo(330 - round($sums_for_tabletest[$i]));
                echo "\" x = \"";
                if (round($sums_for_tabletest[$i]) < 100) {
                    echo(40 + ($i * 70));
                } elseif (round($sums_for_tabletest[$i]) < 10) {
                    echo(38 + ($i * 70));
                } else {
                    echo(39 + ($i * 70));
                }
                 echo "\" dy=\".35em\">";
                echo round($sums_for_tabletest[$i]);
                echo "</text>";
                echo "</g>";
                }

还有 CSS:

.axis {
  fill: pink;
}
.axis text {
   fill:  #ab1d98;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0;
}

.axis:hover text,
.axis:focus text {
   opacity: 1;
    fill:  #ab1d98;
    font-weight: 600;
    letter-spacing: 1px;
}

.bar {
    fill: #600a58;
    height: 41px;
    transition: fill .3s ease;
    cursor: pointer;
    }

.bar text {
    font-size: .9em;
    font-weight: 800;
    opacity: 0;
}

.bar:hover,
.bar:focus {
    fill: #ffff99;
}

.bar:hover text,
.bar:focus text {
    fill: black;
    opacity: 1;
}

所以总而言之，我正在寻找一种方法，当鼠标悬停在整个透明“轴”类矩形区域的任何地方时，而不仅仅是在不属于的矩形区域“酒吧”类。我主要在寻找仅 svg/css 的解决方案。如果只能通过 javascript 实现，那么了解它也很有帮助，我可以在几周内真正开始学习 javascript 时实现它；我是新手，想在将 javascript 添加到我的代码之前了解 svg 基础知识。

谢谢!

Answer 1

从您的解释来看，这些元素似乎彼此无关。适用于 SVG 的规则与适用于常规 HTML 的规则相同:悬停效果将向上传播 CSS 对象模型，但很难且不建议通过 HTML 将 SVG 的任意部分连接在一起。

一个建议是当您将鼠标悬停在图表的任何部分上时显示轴。在这种情况下，假设所有内容都包含在 .chart 中，内容可能类似于

<g class="chart">
    <g class="bar">
    <g class="bar">
    <g class="bar">
    <g class="bar">
    <g class="axis">
</g>

那么你的效果可能是这样的

.chart
.chart:hover .axis { opacity: 1; }