Question

当我将鼠标悬停在svg元素上时，我试图显示工具提示。为此，我在创建元素时尝试使用<set />标记。

我知道可以在另一个元素的事件上更改当前元素的属性。反向可能吗？在当前元素的鼠标事件上更改另一个元素的属性？

body {
    background-color: #EEE;
}

.container {
    display: flex;
    flex-flow: row wrap;
}

.card {
    width: 20em;
    height: 20em;
    padding: 2em;
    background-color: white;
    margin: 2em;
    box-shadow: 0 0 5px #222;
}

.pie-center {
    background: none;
    border-radius: 50%;
    transform: rotate(-90deg);
}

.circle1 {
    fill: none;
    stroke: teal;
    stroke-width: 7;
    stroke-dasharray: 30 70;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
        <script src="conic-gradient.js" charset="UTF-8"></script>

        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <svg class="pie-center" viewBox="0 0 40 40">
                    <circle class="circle1" r="15.915494309" cx="20" cy="20">
                        <set attributeName="change-me.visibility" from="hidden" to="visible" begin="mouseover" end="mouseout" />
                        <div class="tooltip">
                            <span id="change-me" class="tooltiptext">Tooltip text</span>
                        </div>
                    </circle>
                </svg>
            </div>
        </div>
    </body>
</html>

正如您所看到的，我正在尝试在圆圈上发生visibility事件时更改工具提示中的mouseover属性。这可能吗？

Answer 1

我修复了SMIL并将其显示出来。请注意，您只能将SMIL应用于SVG元素，这就是我将foreObject元素作为目标而不是html元素的原因。

出于某种原因，您已旋转整个SVG，因此工具提示中的文本也会旋转。我会让你处理这件事。

＆＃13;

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
        <script src="conic-gradient.js" charset="UTF-8"></script>

        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <svg class="pie-center" viewBox="0 0 40 40">
                    <circle id="c" class="circle1" r="15.915494309" cx="20" cy="20">
                    </circle>
                    <set href="#fo" attributeName="visibility" to="visible" begin="c.mouseover" end="c.mouseout" />
                    <foreignObject id="fo" visibility="hidden" x="15" width="100" height="100" pointer-events="none">
                        <div class="tooltip">
                            <span id="change-me" class="tooltiptext">Tooltip text</span>
                        </div>
                    </foreignObject>
                </svg>
            </div>
        </div>
    </body>
</html>

＆＃13;

/"\[\\|\\"]/

＆＃13;

Answer 2

如果您只想使用默认工具提示，则只需将<title>元素设置为圆的子元素即可。默认情况下，这只会出现在悬停：

body {
  background-color: #EEE;
}

.container {
  display: flex;
  flex-flow: row wrap;
}

.card {
  width: 20em;
  height: 20em;
  padding: 2em;
  background-color: white;
  margin: 2em;
  box-shadow: 0 0 5px #222;
}

.pie-center {
  background: none;
  border-radius: 50%;
  transform: rotate(-90deg);
}

.circle1 {
  fill: none;
  stroke: teal;
  stroke-width: 7;
  stroke-dasharray: 30 70;
}

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <script src="conic-gradient.js" charset="UTF-8"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="card">
      <svg class="pie-center" viewBox="0 0 40 40">
        <circle class="circle1" r="15.915494309" cx="20" cy="20">
          <title class="tooltip">Tooltip</title>
        </circle>
      </svg>
    </div>
  </div>
</body>

</html>

更改当前元素悬停事件的另一个元素样式

2 个答案: