Почему селектор: hover не работает с этим элементом SVG? - PullRequest
Новая
       15

Почему селектор: hover не работает с этим элементом SVG?

0 голосов
/ 26 мая 2019

Когда я использую селектор #apple:hover, чтобы выбрать элемент SVG, кажется, что наведение не работает. Почему это не работает? 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
	<defs>
		<style>
		<![CDATA[
			#apple {
				fill: green;
			}

			#apple:hover {
				fill:red;
			}
		 ]]>
	</style>
		<path id="apple" d="M38.6,30.1c0.1,8.6,7.5,11.4,7.6,11.5c-0.1,0.2-1.2,4.1-3.9,8.1c-2.4,3.5-4.8,6.9-8.7,7
		c-3.8,0.1-5-2.3-9.4-2.3c-4.3,0-5.7,2.2-9.3,2.3c-3.7,0.1-6.6-3.7-9-7.2c-4.9-7-8.6-19.9-3.6-28.6c2.5-4.3,6.9-7,11.7-7.1
		c3.7-0.1,7.1,2.5,9.4,2.5c2.2,0,6.4-3,10.9-2.6c1.9,0.1,7,0.7,10.4,5.6C44.5,19.5,38.5,23,38.6,30.1 M31.5,9.1c2-2.4,3.3-5.7,3-9.1
		c-2.9,0.1-6.3,1.9-8.4,4.3c-1.8,2.1-3.4,5.5-3,8.8C26.2,13.3,29.5,11.5,31.5,9.1"/>
	</defs>
	</svg>
	<svg viewBox="0 0 46.2 56.8" width="47" height="57">
		<use xlink:href="#apple"/>
	</svg>
</body>
</html>

1 Ответ

0 голосов
/ 26 мая 2019

Как и большинство других (включая меня), вам, вероятно, наплевать на объяснение, поэтому сначала я покажу вам ответ, а потом объяснение.

Вот вам ответ: 

#apple {
  fill: green;
}

#apple:hover {
  fill: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" width="47" height="57" viewBox="0 0 46.2 56.8">
    <path id="apple" d="M38.6,30.1c0.1,8.6,7.5,11.4,7.6,11.5c-0.1,0.2-1.2,4.1-3.9,8.1c-2.4,3.5-4.8,6.9-8.7,7
    c-3.8,0.1-5-2.3-9.4-2.3c-4.3,0-5.7,2.2-9.3,2.3c-3.7,0.1-6.6-3.7-9-7.2c-4.9-7-8.6-19.9-3.6-28.6c2.5-4.3,6.9-7,11.7-7.1
    c3.7-0.1,7.1,2.5,9.4,2.5c2.2,0,6.4-3,10.9-2.6c1.9,0.1,7,0.7,10.4,5.6C44.5,19.5,38.5,23,38.6,30.1 M31.5,9.1c2-2.4,3.3-5.7,3-9.1
    c-2.9,0.1-6.3,1.9-8.4,4.3c-1.8,2.1-3.4,5.5-3,8.8C26.2,13.3,29.5,11.5,31.5,9.1"/>
  </svg>
</body>
</html>

Вот ваше объяснение: 

<svg viewBox="0 0 46.2 56.8" width="47" height="57">
    <use xlink:href="#apple"/>
</svg>

Проблема была в основном просто, <use xlink:href="#apple"/>.Вы могли бы также просто выбрать элемент svg или use, но, если вы хотите выбрать этот конкретный путь, лучшим вариантом будет ^^.

...