Question

我有一个带有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，我在网上搜索过，但找不到任何有用的信息。

Answer 1

您可以将它们设置为不同的元素：

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>

Answer 2

作为stated by Temani Afif，您将无法定位单个图案元素，但可以通过编程方式模拟图案：

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>

Link to fiddle

SVG模式更改悬停元素的颜色

2 个答案: