是否可以通过在html<svg>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容？

Question

例如，要呈现持续数天的每年重复事件的各种变化的日期时间，拥有一个可重复使用的单个 svg 图像，该图像可以从其 svg 标签中获取 data-datetime="yyyy-mm-dd" 属性，并将其渲染为随后显示在图像中的正确日期。人们可能想要这个的原因是，一个票务系统，否则显示/启动/产品图像必须是活动每一天的单独图像文件，如果您希望该图像在其内部显示日期.

Answer 1

有这样的事吗？

const formattedDate = dateText => new Date(dateText).toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const updateSVGDate = (svgId) => {
  const svgElement = document.getElementById(svgId);
  const dateText = svgElement.dataset.datetime;
  if (dateText) {
    const textElement = svgElement.querySelector('#event-date');
    if (textElement) {
      textElement.textContent = formattedDate(dateText);
    }
  }
}
updateSVGDate('event-svg');

<svg id="event-svg" data-datetime="2025-02-15" width="200" height="100">
    <rect width="200" height="100" fill="lightblue" />
    <text id="event-date" x="35" y="50" font-size="16" fill="black">Default Date</text>
</svg>