在Next.js中动态操作SVG：利用React组件模型实现属性修改与节点添加

import React from 'react';

/**
 * 一个可动态配置的SVG组件
 * @param {object} props - 组件属性
 * @param {string} props.messageText - 要显示的文本内容
 * @param {string} props.textColor - 文本颜色
 * @param {number} props.textX - 文本的X坐标
 * @param {number} props.textY - 文本的Y坐标
 * @param {string} props.subheadText - 副标题文本
 */
function DynamicSvg({ messageText, textColor, textX, textY, subheadText }) {
  return (
    <svg viewBox="0 0 100 100" width="300" height="300">
      {/* 动态文本内容和位置 */}
      <text x={textX} y={textY} fill={textColor} style={{ fontSize: '4.93889px' }}>
        <tspan>{messageText}</tspan>
      </text>

      {/* 另一个动态文本，例如副标题 */}
      <text x="0" y="40" fill="red">
        <tspan>{subheadText}</tspan>
      </text>
    </svg>
  );
}

export default DynamicSvg;

// pages/index.js
import React, { useState } from 'react';
import DynamicSvg from '../components/DynamicSvg'; // 假设DynamicSvg组件在components目录下

export default function HomePage() {
  const [currentMessage, setCurrentMessage] = useState("Hello Dynamic SVG!");
  const [currentColor, setCurrentColor] = useState("#000000");
  const [currentSubhead, setCurrentSubhead] = useState("This is a subhead");

  const handleTextChange = (e) => {
    setCurrentMessage(e.target.value);
  };

  const handleColorChange = (e) => {
    setCurrentColor(e.target.value);
  };

  return (
    <div className="flex flex-col min-h-screen items-center justify-center p-4">
      <h1>动态SVG示例</h1>
      <div className="mb-4">
        <label htmlFor="messageInput" className="block text-sm font-medium text-gray-700">主文本：</label>
        <input
          type="text"
          id="messageInput"
          value={currentMessage}
          onChange={handleTextChange}
          className="mt-1 p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
        />
      </div>
      <div className="mb-4">
        <label htmlFor="colorPicker" className="block text-sm font-medium text-gray-700">文本颜色：</label>
        <input
          type="color"
          id="colorPicker"
          value={currentColor}
          onChange={handleColorChange}
          className="mt-1"
        />
      </div>

      <DynamicSvg
        messageText={currentMessage}
        textColor={currentColor}
        textX={10} // 固定X坐标
        textY={20} // 固定Y坐标
        subheadText={currentSubhead}
      />
    </div>
  );
}

// components/DynamicSvg.js (更新后的版本)
import React from 'react';

function DynamicSvg({ messageText, textColor, textX, textY, subheadText, showLine = false }) {
  return (
    <svg viewBox="0 0 100 100" width="300" height="300">
      <text x={textX} y={textY} fill={textColor} style={{ fontSize: '4.93889px' }}>
        <tspan>{messageText}</tspan>
      </text>

      <text x="0" y="40" fill="red">
        <tspan>{subheadText}</tspan>
      </text>

      {/* 根据showLine prop条件渲染一条线 */}
      {showLine && (
        <line
          x1="10"
          y1="50"
          x2="90"
          y2="50"
          stroke="#0000FF" // 蓝色
          strokeWidth="1"
        />
      )}
    </svg>
  );
}

export default DynamicSvg;

// pages/index.js (更新后的版本)
import React, { useState } from 'react';
import DynamicSvg from '../components/DynamicSvg';

export default function HomePage() {
  const [currentMessage, setCurrentMessage] = useState("Hello Dynamic SVG!");
  const [currentColor, setCurrentColor] = useState("#000000");
  const [currentSubhead, setCurrentSubhead] = useState("This is a subhead");
  const [showDynamicLine, setShowDynamicLine] = useState(false); // 新增状态

  const handleTextChange = (e) => setCurrentMessage(e.target.value);
  const handleColorChange = (e) => setCurrentColor(e.target.value);
  const handleToggleLine = () => setShowDynamicLine(!showDynamicLine); // 新增处理函数

  return (
    <div className="flex flex-col min-h-screen items-center justify-center p-4">
      <h1>动态SVG示例</h1>
      <div className="mb-4">
        <label htmlFor="messageInput" className="block text-sm font-medium text-gray-700">主文本：</label>
        <input type="text" id="messageInput" value={currentMessage} onChange={handleTextChange} className="mt-1 p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" />
      </div>
      <div className="mb-4">
        <label htmlFor="colorPicker" className="block text-sm font-medium text-gray-700">文本颜色：</label>
        <input type="color" id="colorPicker" value={currentColor} onChange={handleColorChange} className="mt-1" />
      </div>
      <div className="mb-4">
        <button
          onClick={handleToggleLine}
          className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          {showDynamicLine ? '隐藏线条' : '显示线条'}
        </button>
      </div>

      <DynamicSvg
        messageText={currentMessage}
        textColor={currentColor}
        textX={10}
        textY={20}
        subheadText={currentSubhead}
        showLine={showDynamicLine} // 传递新的prop
      />
    </div>
  );
}