События наведения мыши для SVG-пути клипа с несколькими путями - PullRequest
Новая
       7

События наведения мыши для SVG-пути клипа с несколькими путями

0 голосов
/ 29 января 2019

У меня есть демонстрационное изображение SVG, состоящее из нескольких кругов, которые обрезают анимированный GIF.

Можно ли наблюдать за парящими событиями для каждого отдельного круга, когда пользователь наводит на них курсор?Например, верхний левый круг или средний правый круг.

Также возможно ли управлять наложением цвета на эти круги, когда они наведены?

РЕДАКТИРОВАТЬ: В идеале мне бы хотелось, чтобы при наведении курсора был применен цвет поверх наведенного круга, и чтобы можно было перебрасывать кого-либо на другую страницу.

РЕДАКТИРОВАТЬ 2: При наведении курсора, а также изменение цвета наложения I 'хотелось бы, чтобы текст был в центре круга. 

img {
    clip-path: url(#myClip);
    width: 100%;
}
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">

<svg width="0" height="0">
    <defs>
        <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
            <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
            <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
            <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
            <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
            <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
            <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
        </clipPath>
    </defs>
</svg>

Ответы [ 3 ]

0 голосов
/ 29 января 2019

Что ж, чтобы сделать его кликабельным, нужно указать все пути и тег <a href=""><path id="wave1">... </a>.Затем вы добавляете идентификатор для каждого пути и в CSS вы просто делаете a svg:hover #wave1 {code to change the element on hover}

0 голосов
/ 29 января 2019

Самое простое решение - переместить GIF в SVG, чтобы вы могли надежно выровнять круги наложения с отверстиями пути клипа. 

svg {
  width: 100%;
}

.overlay path {
  fill: red;
  fill-opacity: 0;
}

.overlay path:hover {
  fill-opacity: 0.5;
}
<svg viewBox="0 0 500 500">
    <defs>
        <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00991, 0.01)">
            <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
            <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
            <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
            <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
            <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
            <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
        </clipPath>
    </defs>
    
  <image xlink:href="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" width="500" height="500" clip-path="url(#myClip)"/>

  <g class="overlay" transform="scale(4.955, 5)"><!-- 500 * the scale transform values in the clipPath -->
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 63.369194,12.267001 A 12.607063,12.267001 0 0 1 50.762131,24.534002 12.607063,12.267001 0 0 1 38.155067,12.267001 12.607063,12.267001 0 0 1 50.762131,0 12.607063,12.267001 0 0 1 63.369194,12.267001 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 100.85033,12.267001 A 12.607063,12.267001 0 0 1 88.243263,24.534002 12.607063,12.267001 0 0 1 75.6362,12.267001 12.607063,12.267001 0 0 1 88.243263,0 12.607063,12.267001 0 0 1 100.85033,12.267001 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 25.894252,12.267001 A 12.607063,12.267001 0 0 1 13.287189,24.534002 12.607063,12.267001 0 0 1 0.68012524,12.267001 12.607063,12.267001 0 0 1 13.287189,0 12.607063,12.267001 0 0 1 25.894252,12.267001 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 63.369194,49.877972 A 12.607063,12.267001 0 0 1 50.762131,62.144973 12.607063,12.267001 0 0 1 38.155067,49.877972 12.607063,12.267001 0 0 1 50.762131,37.61097 12.607063,12.267001 0 0 1 63.369194,49.877972 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 25.214127,49.877972 A 12.607063,12.267001 0 0 1 12.607063,62.144973 12.607063,12.267001 0 0 1 0,49.877972 12.607063,12.267001 0 0 1 12.607063,37.61097 12.607063,12.267001 0 0 1 25.214127,49.877972 Z" />
    </a>
    <a xlink:href="http://www.stackoverflow.com/">
      <path d="M 25.214127,87.216888 A 12.607063,12.267001 0 0 1 12.607063,99.48389 12.607063,12.267001 0 0 1 0,87.216888 12.607063,12.267001 0 0 1 12.607063,74.949887 12.607063,12.267001 0 0 1 25.214127,87.216888 Z" />
    </a>
  </g>
</svg>
0 голосов
/ 29 января 2019

Я бы воссоздал это с другим элементом, которым вы можете управлять отдельно.

Я сделал 9 лунок, но вы можете легко уменьшить их, как в своем примере, удалив фон из необходимого элемента. 

img {
    width: 100%;
    display:bloc;
}
.container {
  position:relative;
}
.container > div {
  position:absolute;
  z-index:0;
  width:calc(100%/3);
  height:calc(100%/3);
  background:
    radial-gradient(farthest-side,transparent 90%,#fff 92%),
    linear-gradient(rgba(255,0,0,0.4),rgba(255,0,0,0.4)) center/0 0 no-repeat,
    linear-gradient(rgba(0,255,0,0.4),rgba(0,255,0,0.4)) center/0 0 no-repeat;
}
.container > div:nth-child(2n):hover {
  background-size: auto auto,0 0,auto auto;
}
.container > div:nth-child(2n+1):hover {
  background-size: auto auto,auto auto,0 0;
}
.container > div:nth-child(1) {
  top:0;
  left:0;
}
.container > div:nth-child(2) {
  top:0;
  left:calc(100%/3);
}
.container > div:nth-child(3) {
  top:0;
  left:calc(2*100%/3);
}
.container > div:nth-child(4) {
  top:calc(100%/3);
  left:0;
}
.container > div:nth-child(5) {
  top:calc(100%/3);
  left:calc(100%/3);
}
.container > div:nth-child(6) {
  top:calc(100%/3);
  left:calc(2*100%/3);
}
.container > div:nth-child(7) {
  top:calc(2*100%/3);
  left:0;
}
.container > div:nth-child(8) {
  top:calc(2*100%/3);
  left:calc(100%/3);
}
.container > div:nth-child(9) {
  top:calc(2*100%/3);
  left:calc(2*100%/3);
}
<div class="container">
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<img src="https://media.giphy.com/media/3ornk23QkOZcd32kjm/giphy.gif" alt="">

</div>
...