Next.js 中动态控制 SVG：将静态图形转化为交互式 React 组件

// components/DynamicSvg.jsx
import React from 'react';

function DynamicSvg({ mainMessage, subheadMessage, subheadColor = 'red' }) {
  return (
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      {/* 主消息文本 */}
      <text x="5" y="20" fontSize="10">
        <tspan>{mainMessage}</tspan>
      </text>

      {/* 副标题文本，颜色可变 */}
      <text x="5" y="40" fontSize="8" fill={subheadColor}>
        <tspan>{subheadMessage}</tspan>
      </text>

      {/* 其他静态或动态的SVG元素 */}
      <circle cx="50" cy="70" r="10" fill="blue" />
    </svg>
  );
}

export default DynamicSvg;

// pages/index.js 或其他组件
import React, { useState } from 'react';
import DynamicSvg from '../components/DynamicSvg';

export default function HomePage() {
  const [currentSubhead, setCurrentSubhead] = useState("这是一个动态副标题");
  const [currentColor, setCurrentColor] = useState("red");

  const toggleSubhead = () => {
    setCurrentSubhead(prev => prev === "这是一个动态副标题" ? "新的副标题内容！" : "这是一个动态副标题");
    setCurrentColor(prev => prev === "red" ? "green" : "red");
  };

  return (
    <div className="flex flex-col min-h-screen items-center justify-center">
      <h1>动态 SVG 示例</h1>
      <DynamicSvg
        mainMessage="欢迎来到我的应用程序！"
        subheadMessage={currentSubhead}
        subheadColor={currentColor}
      />
      <button onClick={toggleSubhead} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
        切换副标题和颜色
      </button>
    </div>
  );
}

// components/DynamicSvg.jsx (在之前的组件基础上修改)
import React from 'react';

function DynamicSvg({ mainMessage, subheadMessage, subheadColor = 'red', showLine = false }) {
  return (
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <text x="5" y="20" fontSize="10">
        <tspan>{mainMessage}</tspan>
      </text>

      <text x="5" y="40" fontSize="8" fill={subheadColor}>
        <tspan>{subheadMessage}</tspan>
      </text>

      {/* 根据 showLine prop 决定是否渲染这条线 */}
      {showLine && (
        <line x1="10" y1="50" x2="90" y2="50" stroke="purple" strokeWidth="1" />
      )}

      <circle cx="50" cy="70" r="10" fill="blue" />
    </svg>
  );
}

export default DynamicSvg;

// pages/index.js 或其他组件
import React, { useState } from 'react';
import DynamicSvg from '../components/DynamicSvg';

export default function HomePage() {
  const [currentSubhead, setCurrentSubhead] = useState("这是一个动态副标题");
  const [currentColor, setCurrentColor] = useState("red");
  const [displayLine, setDisplayLine] = useState(false); // 控制线条显示的状态

  const toggleSubhead = () => {
    setCurrentSubhead(prev => prev === "这是一个动态副标题" ? "新的副标题内容！" : "这是一个动态副标题");
    setCurrentColor(prev => prev === "red" ? "green" : "red");
  };

  const toggleLine = () => {
    setDisplayLine(prev => !prev); // 切换线条的显示/隐藏
  };

  return (
    <div className="flex flex-col min-h-screen items-center justify-center">
      <h1>动态 SVG 示例</h1>
      <DynamicSvg
        mainMessage="欢迎来到我的应用程序！"
        subheadMessage={currentSubhead}
        subheadColor={currentColor}
        showLine={displayLine} // 传入控制线条显示的 prop
      />
      <button onClick={toggleSubhead} className="mt-4 mr-2 px-4 py-2 bg-blue-500 text-white rounded">
        切换副标题和颜色
      </button>
      <button onClick={toggleLine} className="mt-4 px-4 py-2 bg-green-500 text-white rounded">
        {displayLine ? "隐藏线条" : "显示线条"}
      </button>
    </div>
  );
}