为何我的SVG图像不可见？Canvas替换SVG圆形按钮显示问题

Hey there! Since you’ve already confirmed your SVG images work as <img> elements, we just need to map the original circle positions to your Canvas and draw the images correctly. Here’s how to do it step by step:

Step 1: Grab SVG Circle Positions #

First, we’ll extract the center coordinates (cx, cy) and radius (r) from each SVG circle—this is the key data to align your images on Canvas.

// Get your SVG element
const svg = document.getElementsByTagName('svg')[0];
// Collect all circle elements
const circles = svg.querySelectorAll('circle');

// Store each circle's position and size in an array
const circlePositions = Array.from(circles).map(circle => ({
  cx: parseFloat(circle.getAttribute('cx')),
  cy: parseFloat(circle.getAttribute('cy')),
  radius: parseFloat(circle.getAttribute('r'))
}));

Step 2: Set Up Canvas and Load Images #

Next, set up your Canvas context and load your images. We’ll use promises to make sure all images are fully loaded before drawing (no broken or missing images!).

// Get your Canvas and context
const canvas = document.getElementById('your-canvas-id'); // Replace with your Canvas ID
const ctx = canvas.getContext('2d');

// Match Canvas size to your SVG so coordinates line up exactly
canvas.width = parseFloat(svg.getAttribute('width'));
canvas.height = parseFloat(svg.getAttribute('height'));

// Helper function to load an image and return a promise
function loadImage(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = err => reject(`Failed to load ${imageUrl}: ${err}`);
    img.src = imageUrl;
  });
}

// Replace this array with your actual image URLs (order should match your circles!)
const imageUrls = [
  'path/to/your/first-image.svg',
  'path/to/your/second-image.svg',
  // Add more as needed
];

Step 3: Draw Images Centered on Circle Positions #

The drawImage method uses the top-left corner of the image as its starting point, so we need to adjust the position to center the image on the original circle’s center. Here are two common options:

// Load all images first, then draw them to Canvas
Promise.all(imageUrls.map(loadImage))
  .then(loadedImages => {
    circlePositions.forEach((circle, index) => {
      const img = loadedImages[index];
      const { cx, cy, radius } = circle;

      // Option 1: Draw image at its original size, centered on the circle
      const imgX = cx - img.width / 2;
      const imgY = cy - img.height / 2;
      ctx.drawImage(img, imgX, imgY);

      // Option 2: Scale image to fit the circle's diameter (uncomment to use)
      // const imgSize = radius * 2;
      // ctx.drawImage(img, cx - radius, cy - radius, imgSize, imgSize);
    });
  })
  .catch(error => console.error('Image loading error:', error));

Quick Tips to Avoid Issues: #

• Coordinate Alignment: Double-check that your Canvas and SVG have the same width/height—this ensures the cx/cy values translate directly.
• Image Order: Make sure your imageUrls array is in the same order as the circles in your SVG, so each image matches the right circle.
• Hide Original SVG: Once your Canvas images are drawn, you can hide the original SVG with svg.style.display = 'none' if you don’t need it anymore.

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