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

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

  •  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>
    推荐文章