How does JavaScript manipulate and operate on SVG - 面试题

Combining JavaScript with SVG enables powerful dynamic interaction features. Here are the main methods for JavaScript to manipulate SVG:

1. Select SVG Elements Use standard DOM methods to select SVG elements.

javascript
// Select by ID
const circle = document.getElementById('myCircle');

// Select by class name
const circles = document.querySelectorAll('.circle');

// Select by tag name
const allRects = document.querySelectorAll('rect');

// Select by attribute
const filledElements = document.querySelectorAll('[fill="red"]');

2. Create SVG Elements Use createElementNS to create SVG elements (note the namespace).

javascript
const svgNS = 'http://www.w3.org/2000/svg';

// Create SVG element
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '50');
circle.setAttribute('fill', 'blue');

// Add to SVG
const svg = document.querySelector('svg');
svg.appendChild(circle);

3. Modify SVG Attributes Use setAttribute and getAttribute methods.

javascript
const circle = document.querySelector('circle');

// Modify attributes
circle.setAttribute('fill', 'red');
circle.setAttribute('r', '60');
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', '3');

// Get attributes
const fill = circle.getAttribute('fill');
const radius = circle.getAttribute('r');

4. Modify SVG Styles Use style property or classList.

javascript
const circle = document.querySelector('circle');

// Set styles directly
circle.style.fill = 'green';
circle.style.opacity = '0.5';
circle.style.transform = 'scale(1.2)';

// Use classList
circle.classList.add('highlight');
circle.classList.remove('normal');
circle.classList.toggle('active');

5. Event Listeners Add event listeners to SVG elements.

javascript
const circle = document.querySelector('circle');

// Mouse events
circle.addEventListener('click', function() {
  console.log('Circle clicked!');
  this.setAttribute('fill', 'red');
});

circle.addEventListener('mouseover', function() {
  this.style.cursor = 'pointer';
});

circle.addEventListener('mouseout', function() {
  this.style.cursor = 'default';
});

// Keyboard events (requires tabindex)
circle.setAttribute('tabindex', '0');
circle.addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    console.log('Circle activated!');
  }
});

6. Animation Implementation Use JavaScript to implement SVG animations.

javascript
const circle = document.querySelector('circle');

// Using requestAnimationFrame
let progress = 0;
function animate() {
  progress += 0.01;
  const x = 100 + Math.sin(progress * 2 * Math.PI) * 50;
  circle.setAttribute('cx', x);
  
  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}
animate();

// Using CSS transitions
circle.style.transition = 'all 0.5s ease';
circle.setAttribute('fill', 'red');
circle.setAttribute('r', '60');

7. Get Mouse Position Get the mouse position relative to SVG.

javascript
const svg = document.querySelector('svg');

svg.addEventListener('click', function(event) {
  const point = svg.createSVGPoint();
  point.x = event.clientX;
  point.y = event.clientY;
  
  const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse());
  console.log(`SVG coordinates: x=${svgPoint.x}, y=${svgPoint.y}`);
});

8. Drag Functionality Implement drag functionality for SVG elements.

javascript
let selectedElement = null;
let offset = { x: 0, y: 0 };

function getMousePosition(evt) {
  const CTM = svg.getScreenCTM();
  return {
    x: (evt.clientX - CTM.e) / CTM.a,
    y: (evt.clientY - CTM.f) / CTM.d
  };
}

function startDrag(evt) {
  selectedElement = evt.target;
  offset = getMousePosition(evt);
  offset.x -= parseFloat(selectedElement.getAttribute('cx'));
  offset.y -= parseFloat(selectedElement.getAttribute('cy'));
}

function drag(evt) {
  if (selectedElement) {
    evt.preventDefault();
    const coord = getMousePosition(evt);
    selectedElement.setAttribute('cx', coord.x - offset.x);
    selectedElement.setAttribute('cy', coord.y - offset.y);
  }
}

function endDrag(evt) {
  selectedElement = null;
}

const svg = document.querySelector('svg');
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('mouseleave', endDrag);

9. Dynamically Create Complex Graphics Use JavaScript to dynamically create complex SVG graphics.

javascript
function createStar(cx, cy, spikes, outerRadius, innerRadius) {
  const svgNS = 'http://www.w3.org/2000/svg';
  const polygon = document.createElementNS(svgNS, 'polygon');
  
  let points = [];
  for (let i = 0; i < spikes * 2; i++) {
    const radius = i % 2 === 0 ? outerRadius : innerRadius;
    const angle = (Math.PI / spikes) * i;
    const x = cx + Math.cos(angle) * radius;
    const y = cy + Math.sin(angle) * radius;
    points.push(`${x},${y}`);
  }
  
  polygon.setAttribute('points', points.join(' '));
  polygon.setAttribute('fill', 'gold');
  polygon.setAttribute('stroke', 'orange');
  polygon.setAttribute('stroke-width', '2');
  
  return polygon;
}

const svg = document.querySelector('svg');
const star = createStar(100, 100, 5, 50, 25);
svg.appendChild(star);

10. Data Visualization Use SVG and JavaScript to create data visualizations.

javascript
const data = [10, 25, 40, 30, 50];
const svg = document.querySelector('svg');
const barWidth = 40;
const gap = 20;

data.forEach((value, index) => {
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  const x = 20 + index * (barWidth + gap);
  const y = 200 - value * 3;
  
  rect.setAttribute('x', x);
  rect.setAttribute('y', y);
  rect.setAttribute('width', barWidth);
  rect.setAttribute('height', value * 3);
  rect.setAttribute('fill', `hsl(${index * 60}, 70%, 50%)`);
  
  svg.appendChild(rect);
});

Best Practices:

Use createElementNS to create SVG elements
Reasonably use event delegation
Optimize animation performance, use requestAnimationFrame
Pay attention to namespaces
Consider using SVG libraries (like D3.js) for complex scenarios
Test cross-browser compatibility