Next.js/React中动态操作SVG：属性修改与节点添加的现代化方法

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

const BaseSvgComponent = () => {
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <rect x="10" y="10" width="80" height="80" fill="lightblue" />
      <circle cx="50" cy="50" r="30" fill="lightcoral" />
    </svg>
  );
};

export default BaseSvgComponent;

// pages/index.js 或 App.js
import BaseSvgComponent from '../components/BaseSvgComponent';

export default function Home() {
  return (
    <div style={{ width: '300px', height: '300px' }}>
      <BaseSvgComponent />
    </div>
  );
}

<tspan
    sodipodi:role="line"
    style="font-size:4.93889px;fill:#000000;stroke:none;stroke-width:0.264583;stroke-opacity:1"
    x="79.525864"
    y="29.664894"
    id="tspan59991">message
</tspan>

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

/**
 * 一个可动态修改内容的SVG组件
 * @param {object} props
 * @param {string} props.messageText - 要显示的文本内容
 * @param {string} props.textColor - 文本颜色
 * @param {string|number} props.messageX - 文本的X坐标
 * @param {string|number} props.messageY - 文本的Y坐标
 * @param {boolean} props.showLine - 是否显示附加的线条
 * @param {number} props.lineYOffset - 附加线条的Y轴偏移量
 * @param {string|number} props.lineX2 - 附加线条的X2坐标
 */
const DynamicSvgContent = ({
  messageText = "默认消息",
  textColor = "#000000",
  messageX = "79.525864",
  messageY = "29.664894",
  showLine = false,
  lineYOffset = 1,
  lineX2 = "90"
}) => {
  const baseTextStyle = {
    fontSize: '4.93889px',
    stroke: 'none',
    strokeWidth: '0.264583',
    strokeOpacity: '1'
  };

  // 确保messageY是数字以便计算偏移
  const currentMessageY = parseFloat(messageY);

  return (
    <svg viewBox="0 0 100 100" width="auto" height="auto">
      {/* 动态修改文本内容、颜色和位置 */}
      <text x={messageX} y={currentMessageY} style={{ ...baseTextStyle, fill: textColor }}>
        <tspan id="dynamicTspan">{messageText}</tspan>
      </text>

      {/* 动态添加新的SVG节点 */}
      {showLine && (
        <line
          x1={messageX}
          y1={currentMessageY + lineYOffset}
          x2={lineX2}
          y2={currentMessageY + lineYOffset}
          style={{ stroke: textColor, strokeWidth: '0.5' }} // 线条颜色与文本保持一致
        />
      )}
    </svg>
  );
};

export default DynamicSvgContent;

// pages/index.js
import React, { useState } from 'react';
import DynamicSvgContent from '../components/DynamicSvgContent'; // 确保路径正确

export default function HomePage() {
  const [displayText, setDisplayText] = useState("初始消息");
  const [displayColor, setDisplayColor] = useState("purple");
  const [showExtraLine, setShowExtraLine] = useState(false);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4">
      <h1 className="text-2xl font-bold mb-6">动态SVG内容演示</h1>

      <div className="mb-4">
        <label htmlFor="textInput" className="block text-sm font-medium text-gray-700">修改文本:</label>
        <input
          id="textInput"
          type="text"
          value={displayText}
          onChange={(e) => setDisplayText(e.target.value)}
          className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        />
      </div>

      <div className="mb-4">
        <label htmlFor="colorInput" className="block text-sm font-medium text-gray-700">修改颜色:</label>
        <input
          id="colorInput"
          type="color"
          value={displayColor}
          onChange={(e) => setDisplayColor(e.target.value)}
          className="mt-1 block w-full h-10 border border-gray-300 rounded-md shadow-sm"
        />
      </div>

      <div className="mb-6 flex items-center">
        <input
          id="toggleLine"
          type="checkbox"
          checked={showExtraLine}
          onChange={(e) => setShowExtraLine(e.target.checked)}
          className="h-4 w-4 text-indigo-600 border-gray-300 rounded"
        />
        <label htmlFor="toggleLine" className="ml-2 block text-sm text-gray-900">显示附加线条</label>
      </div>

      <div className="border p-4 rounded-lg shadow-md bg-white">
        <DynamicSvgContent
          messageText={displayText}
          textColor={displayColor}
          messageX="10" // 示例中调整为更易见的坐标
          messageY="50"
          showLine={showExtraLine}
          lineYOffset={10} // 确保线条与文本有一定距离
          lineX2="90"
        />
      </div>

      <p className="mt-8 text-gray-600 text-sm">
        通过修改上方输入框和选择框，观察SVG内容的实时变化。
      </p>
    </div>
  );
}