代码之家 › 专栏 › 技术社区 › WebDragon

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

custom-data-attribute markup scripting svg html

0

WebDragon · 技术社区 · 1 年前

例如,要呈现持续数天的年度重复事件的各种变化的日期时间,需要一个可重复使用的单个svg图像,该图像可以从其svg标签中获取datadatetime=“yyyy-mm-dd”属性,并将其呈现为适当的日期,随后在图像中显示。人们可能希望这样做的原因是,例如,一个票务系统,否则显示/飞溅/产品图像必须是活动每天的单独图像文件, 如果你想让那张照片本身显示日期。

1 回复 | 直到 1 年前

1

2

mplungjan 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>