SVG折线：鼠标悬停时修改points属性值的实现方法

Since CSS can’t directly alter the points attribute of an SVG polyline, we’ll use JavaScript to handle hover events and update the attribute dynamically. Here’s a step-by-step implementation tailored to your cube SVG setup:

Step 1: Prepare Your SVG Structure #

First, make sure your target polyline has a unique ID so we can easily reference it. Let’s add an example polyline (representing a cube edge) to your existing SVG:

<svg>
  <!-- Your existing gradient definitions -->
  <defs>
    <linearGradient id="Gradient1">
      <stop class="stop1" offset="0%"/>
      <stop class="stop2" offset="100%"/>
    </linearGradient>
  </defs>
  <style>
    #rect1 {fill: url(#Gradient1);}
    .stop1 {stop-color: black;}
    .stop2 {stop-color: #5961FF;}
    #cube { transform-origin: 50% 30%; transform: scale(0.5) translate(-220px, 0); }
    #cube-text { font-size: 2.5em; fill: red; transform: rotate(-30,300, 10); font-family: 'VT323', monospace; text-shadow: -2px 4px 2px rgba(254,254,254,0.5), -4px 4px 3px rgba(255,255,255,0.4), -6px 4px 2px rgba(22,44,65,0.62), -8px 4px 1px rgba(22,44,65,1); opacity: 1; }
  </style>
  <!-- Example polyline for a cube edge -->
  <polyline id="cube-edge" points="100,100 200,100 200,200" fill="none" stroke="black" stroke-width="2"/>
  <!-- Rest of your cube elements (rect1, cube group, etc.) -->
</svg>

Step 2: Add JavaScript to Handle Hover Events #

We’ll attach mouseover and mouseout listeners to swap between the polyline’s original points and its hover-state points.

Option 1: Simple Inline Script #

Add this script tag either inside your SVG or at the end of your HTML body:

// Grab the polyline element
const cubeEdge = document.getElementById('cube-edge');

// Store original points to reset later
const originalPoints = cubeEdge.getAttribute('points');
// Define your desired hover-state points
const hoverPoints = "100,100 250,150 200,200"; // Adjust these values to match your cube's design

// Trigger point change on hover
cubeEdge.addEventListener('mouseover', () => {
  cubeEdge.setAttribute('points', hoverPoints);
});

// Reset points when hover ends
cubeEdge.addEventListener('mouseout', () => {
  cubeEdge.setAttribute('points', originalPoints);
});

Option 2: Maintainable Data Attribute Approach #

For cleaner code, store the point sets in data attributes on the polyline:

<polyline id="cube-edge" 
          data-original-points="100,100 200,100 200,200" 
          data-hover-points="100,100 250,150 200,200"
          points="100,100 200,100 200,200" 
          fill="none" stroke="black" stroke-width="2"/>

Then update the JavaScript to read from these attributes:

const cubeEdge = document.getElementById('cube-edge');

cubeEdge.addEventListener('mouseover', () => {
  cubeEdge.setAttribute('points', cubeEdge.dataset.hoverPoints);
});

cubeEdge.addEventListener('mouseout', () => {
  cubeEdge.setAttribute('points', cubeEdge.dataset.originalPoints);
});

Step 3: Optional Smooth Animation #

If you want a gradual transition between point sets, use SVG’s <animate> element. Add this inside your polyline:

<animate id="edge-hover-anim" attributeName="points" 
         from="100,100 200,100 200,200" 
         to="100,100 250,150 200,200" 
         dur="0.3s" begin="indefinite" fill="freeze"/>

Then modify the JavaScript to trigger the animation:

const cubeEdge = document.getElementById('cube-edge');
const hoverAnim = document.getElementById('edge-hover-anim');
const originalPoints = cubeEdge.getAttribute('points');

cubeEdge.addEventListener('mouseover', () => {
  hoverAnim.beginElement();
});

cubeEdge.addEventListener('mouseout', () => {
  // Reverse the animation to reset
  hoverAnim.setAttribute('from', hoverAnim.getAttribute('to'));
  hoverAnim.setAttribute('to', originalPoints);
  hoverAnim.beginElement();
  // Reset animation values for next hover
  setTimeout(() => {
    hoverAnim.setAttribute('from', originalPoints);
    hoverAnim.setAttribute('to', "100,100 250,150 200,200");
  }, 300); // Match the animation duration
});

Quick Tips #

• Adjust the points values to match your cube’s exact coordinates—you’ll need to calculate the x/y positions that fit your desired hover effect.
• If you have multiple polylines to modify, use a shared class instead of individual IDs to keep your code DRY.

内容的提问来源于stack exchange，提问作者Eddie Taliaferro