Шаблон SVG меняет цвет зависшего элемента

У меня есть фон с шаблоном SVG, и я хочу изменить только цвет элемента, на который наведен курсор, а не все.

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

svg:hover pattern polygon{
  fill:red;
  -webkit-transition: padding 0s;
}

polygon{
  -webkit-transition: all 0.75s ease-in;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%">
    <defs>
      <pattern id = "stars" patternUnits = "userSpaceOnUse" width = "100" height = "100">
        <polygon points = "50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill = "blue"/>
      </pattern>
    </defs>
    <rect width = "100%" height = "100%" fill = "url(#stars)" />
  </svg>

</div>

Возможно, мне нужно использовать JS, но я не знаю, как это сделать. Я впервые работаю с SVG, я искал в Интернете, но не нашел ничего полезного.

javascript html css svg

24.07.2018 11:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете сделать из них разные элементы:

polygon:hover{
  fill:red;
  transition: 0s;
}

polygon {
  transition: all 0.5s ease-in;
}

<svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%">
    <polygon points = "50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill = "blue"/>
    <polygon points = "50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" transform = "translate(100 0)" fill = "blue"/>
    <polygon points = "50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" transform = "translate(200 0)" fill = "blue"/>
    <polygon points = "50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" transform = "translate(300 0)" fill = "blue"/>
  </svg>

Ничего страшного, если у меня мало элементов, но нет, если их много. Я не знаю, сколько элементов у меня будет (может быть, 50+), почему я использую паттерн

— 24.07.2018 11:30

@Plum С шаблоном Я не думаю, что вы можете настроить таргетинг на элемент индивидуально, потому что это шаблон и рассматривается как один элемент

— 24.07.2018 11:31

24.07.2018 11:24

Ответ принят как подходящий

Как заявил Темани Афиф, вы не сможете нацеливаться на отдельные элементы шаблона, но вы можете программно моделировать шаблон:

var svg = document.querySelector('svg');
const X_OFFSET = 100;

for (let i = 0 ; i < 10 ; i++) {
  var useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
  useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#star');
  useElement.setAttribute('transform', 'translate(' + (X_OFFSET * i) + ' 0)');
	svg.appendChild(useElement);
}

polygon:hover{
  fill:red;
  -webkit-transition: padding 0s;
}

polygon{
  -webkit-transition: all 0.75s ease-in;
}

<div>

  <svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%">
    <defs>
      <polygon id = "star" points = "50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill = "blue"/>
    </defs>
  </svg>

</div>

Ссылка на скрипку

Какой браузер?

— 24.07.2018 13:10

Хорошо, я подтверждаю, что он не работает в Chrome (это с Firefox), я проверю это ...

— 24.07.2018 13:18

Небольшой обходной путь в ожидании лучшего решения: jsfiddle.net/6yzx8bar/2

— 25.07.2018 16:18

@Plum: спасибо за ваш вклад! Вот еще один обходной путь, состоящий в клонировании звездообразного узла вместо создания узлов use, но он каким-то образом уводит нас от исходной проблемы ... jsfiddle.net/vcrbx2qp/33

— 26.07.2018 11:44

24.07.2018 11:36