VueJS中通过响应式变量修改SVG填充样式并切换多SVG文件

Got it, let's tackle this problem step by step. You want a reusable Vue component that can switch between 50 SVG files via a shirtId prop, and dynamically update the fill colors for the background, trim, and foreground classes—without having to create a separate component for each SVG. Here's how to make that happen:

1. Setup SVG Loading (Vue CLI or Vite) #

First, we need to load SVG files as raw text so we can modify their styles dynamically. We'll use a loader to import SVGs as strings:

For Vue CLI: #

Install vue-svg-loader, then update your vue.config.js:

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({ svgo: false }); // Keep original class names and styles
  }
};

For Vite: #

Install vite-plugin-vue-svg, then update your vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-plugin-vue-svg';

export default defineConfig({
  plugins: [vue(), svgLoader({ defaultImport: 'raw' })]
});

2. Build the Reusable CustomShirtSvg Component #

Create a component (e.g., CustomShirtSvg.vue) that handles dynamic SVG loading and style replacement. This component will accept your desired props and output the modified SVG:

<template>
  <div v-html="processedSvg" class="shirt-svg-container"></div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';

// Define props with sensible defaults
const props = defineProps({
  shirtId: {
    type: [String, Number],
    required: true
  },
  background: {
    type: String,
    default: '#f00'
  },
  trim: {
    type: String,
    default: '#0f0'
  },
  foreground: {
    type: String,
    default: '#00f'
  }
});

// Cache loaded SVGs to avoid redundant network requests
const svgCache = reactive({});

// Compute the final SVG with updated styles
const processedSvg = computed(async () => {
  const cacheKey = `${props.shirtId}-${props.background}-${props.trim}-${props.foreground}`;
  
  // Return cached SVG if available
  if (svgCache[cacheKey]) return svgCache[cacheKey];

  try {
    // Dynamically import the SVG file (adjust path to match your file structure)
    const svgModule = await import(`../assets/shirts/shirt-${props.shirtId}.svg?raw`);
    let svgContent = svgModule.default;

    // Replace class fill values with prop colors (works regardless of original fill values)
    svgContent = svgContent.replace(/\.background{fill:(.*?)}/, `.background{fill:${props.background}}`);
    svgContent = svgContent.replace(/\.trim{fill:(.*?)}/, `.trim{fill:${props.trim}}`);
    svgContent = svgContent.replace(/\.foreground{fill:(.*?)}/, `.foreground{fill:${props.foreground}}`);

    // Cache the processed SVG
    svgCache[cacheKey] = svgContent;
    return svgContent;
  } catch (err) {
    console.error(`Failed to load SVG #${props.shirtId}:`, err);
    return '<svg viewBox="0 0 120 121"><text x="20" y="60">SVG Not Found</text></svg>';
  }
});
</script>

<style scoped>
.shirt-svg-container {
  display: inline-block;
  width: 100%;
  max-width: 200px; /* Adjust based on your sizing needs */
}
</style>

3. Use the Component in Your App #

Now you can call the component exactly how you wanted—with static values or reactive variables:

<template>
  <div class="shirt-gallery">
    <!-- Static props -->
    <CustomShirtSvg 
      shirt-id="17" 
      foreground="green" 
      background="#ffcc00" 
      trim="blue"
    />

    <!-- Reactive props (bind to your component's state) -->
    <CustomShirtSvg 
      :shirt-id="currentShirtId" 
      :foreground="selectedForeground" 
      :background="selectedBackground" 
      :trim="selectedTrim"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomShirtSvg from './CustomShirtSvg.vue';

// Example reactive state
const currentShirtId = ref(17);
const selectedForeground = ref('green');
const selectedBackground = ref('#ffcc00');
const selectedTrim = ref('blue');
</script>

Key Notes #

• File Structure: Make sure your SVG files are named consistently (e.g., shirt-1.svg, shirt-2.svg) and stored in a directory like src/assets/shirts/ (adjust the import path in the component if needed).
• Style Replacement: The regex pattern targets the exact class definitions in your SVG's <style> tag, so it works even if your original SVGs have different default fill values.
• Caching: The component caches processed SVGs to avoid reloading and reprocessing the same SVG+color combination multiple times.

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