1

При наведении на svg в компоненте то заливается фон то нет. При наведении в обычном html файле всё работает отлично. Почему в компоненте Vue работает не корректно?

#svg-container {
    background-color: beige;
  }
  .shape-nav{
    width:100px;
    height:100px;
    padding:10px;
  }
  .shape-nav-path {
    fill: none;
    stroke: pink;
    stroke-width: 1px;
  }
  .shape-nav-path:hover {
    cursor: pointer;
    fill: green;
  }
<template>
  <div>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12 md6>
          <svg class="shape-nav" viewBox="-10 -10 120 120">
            <path class="shape-nav-path" d="M 0 100 L 100 100 L 50 0 L 0 100 Z"></path>
          </svg>

          <svg class="shape-nav" viewBox="-10 -10 120 120">
            <path class="shape-nav-path" d="M 0 100 L 0 0 L 100 0 L 100 100 L 0 100 Z"></path>
          </svg>

          <svg class="shape-nav" viewBox="-10 -10 120 120">
            <path class="shape-nav-path" d="M 50 50 m -50 0 a 50 50 0 0 1 100 0 a 50 50 0 0 1 -100 0 z"></path>
          </svg>

          <svg class="shape-nav" viewBox="-10 -10 120 120">
            <path class="shape-nav-path" d="M 0 100 L 100 100 L 75 0 L 25 0 L 0 100 Z"></path>
          </svg>

          <svg class="shape-nav" viewBox="-10 -10 120 120">
            <path class="shape-nav-path" d="M 0 100 L 0 50 A 50 50 0 0 1 100 50 L 100 100 L 0 100 Z"></path>
          </svg>
        </v-flex>
      </v-layout>
    </v-container>
   
  </div>
</template>

2 ответа 2

3

Проблема решается за счет fill: transparent; вместо fill: none; у path

#svg-container {
  background-color: beige;
}
.shape-nav{
  width:100px;
  height:100px;
  padding:10px;
}
.shape-nav-path {
  fill: transparent;
  stroke: pink;
  stroke-width: 1px;
}
.shape-nav-path:hover {
  cursor: pointer;
  fill: green;
}
<svg class="shape-nav" viewBox="-10 -10 120 120">
  <path class="shape-nav-path" d="M 0 100 L 100 100 L 50 0 L 0 100 Z"></path>
</svg>


Или, как было сказано в комментарии ниже за счет pointer-events: all;

#svg-container {
  background-color: beige;
}
.shape-nav{
  width:100px;
  height:100px;
  padding:10px;
}
.shape-nav-path {
  pointer-events:all;
  fill:none;
  stroke: pink;
  stroke-width: 1px;
}
.shape-nav-path:hover {
  cursor: pointer;
  fill: green;
}
<svg class="shape-nav" viewBox="-10 -10 120 120">
  <path class="shape-nav-path" d="M 0 100 L 100 100 L 50 0 L 0 100 Z"></path>
</svg>

4
  • @РустамГимранов так точно 21 июн 2019 в 14:11
  • @РустамГимранов это возможность навести отдельно на линию по сути 21 июн 2019 в 14:20
  • Спасибо. С этим вопросом, я сам разобрался, но вот чего я не понял, так это почему должен быть обязательно fill?
    – doox911
    22 июн 2019 в 4:58
  • @doox911, потому что pointer-events по умолчанию имеет значение visiblePainted - Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none.
    – user256824
    22 июн 2019 в 11:15
2

Не всегда срабатывает. Вот без вью всяких. А не срабатывает, потому что линия слишком тонкая и нужно аккурат в неё попасть при наведении. А если быстро мышкой пролетаешь, то далеко не всегда курсор оказывается четко над линией и событие просто не срабатывает. Это моё предположение.

#svg-container {
    background-color: beige;
  }
  .shape-nav{
    width:100px;
    height:100px;
    padding:10px;
  }
  .shape-nav-path {
    fill: none;
    stroke: pink;
    stroke-width: 1px;
  }
  .shape-nav-path:hover {
    cursor: pointer;
    fill: green;
  }
<svg class="shape-nav" viewBox="-10 -10 120 120">
  <path class="shape-nav-path" d="M 0 100 L 100 100 L 50 0 L 0 100 Z"></path>
</svg>

6
  • Так у вас тоже не корректно работает.
    – doox911
    30 апр 2019 в 13:19
  • @doox911 Приведите пример как корректно отрабатывает в html
    – A K
    30 апр 2019 в 15:45
  • @AK D Если бы я смог это сделать, зачем мне спрашивать? А этот ответ не является решением моего вопроса.
    – doox911
    30 апр 2019 в 18:23
  • @doox911 Перечитал ваш вопрос ещё раз: "почему не работает?", перечитал ответ. Простите, но ваш вопрос отвечен. Я вот читая ваш текст вопроса и данный ответ понял, что у вас без компонента работает - но нет, просто видимо вы как-то не очень ясно излагаете то, что вы думаете. Возможно, вы хотите задать ещё один вопрос, в котором вас будет интересовать уже "как исправить" (в котором вам надо описать желаемое поведение), но я бы не рекомендовал править текущий вопрос кардинально меняя его смысл и обесценивая уже данные ответы.
    – A K
    30 апр 2019 в 18:26
  • @doox911 Насчёт "зачем спрашивать?": возможно, вы как и я любите понимать механику отчего и почему, как устроено и как работает. Я не всегда спрашиваю практические вопросы, иногда я делаю прототипы которые мне не нужны в работе, в конкретном проекте - но помогают мне разобраться в основах технологии. Что у вас в голове - не знаю, не телепат, а в вопросе не написано, там лишь чёрным по белому "почему?"
    – A K
    30 апр 2019 в 18:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.