1

我一直在谷歌搜索并试图找出如何做到这一点，但我什么也没想到。如何访问 SVG 中的 JavaScript 变量？

我正在开发一个用 SVG 编写的界面，但我需要获取当前日期和时间，对其进行格式化并显示它。

我正在努力

<text id="epgDate" x="1130" class="epg-date text" text-anchor="end" width="180">

    <script type="text/javascript"><![CDATA[
    setInterval( currentDate, 1000);
    ]]></script>

</text>
<text id="epgTime" x="1170" class="epg-time text">

    <script type="text/javascript"><![CDATA[
    setInterval( currentTime, 1000);
    ]]></script>

</text>

在别处定义了“currentDate()”和“currentTime()”。

这给了我某种形式的语法错误（我正在使用客户端的仿真器工具来运行此界面，因此它没有告诉我更具体的信息）。 编辑 语法错误在其他地方，并且已修复。但是，这仍然不起作用。即使我尝试使用诸如“alert('x')”或“document.write('x')”之类的微不足道的函数。

有谁知道如何在 SVG 中获取当前的 DateTime，或者在 JavaScript 中获取它并使用 setInterval() 定期回显它？

非常感谢您提前提供的任何帮助！

4

1 回答 1

0

所以看起来我遇到的困惑是 SVG 和 HTML 标记页面之间的区别。SVG 使用稍微不同的 DOM，因此访问/设置元素并不总是以完全相同的方式工作或使用相同的方法。

我编写了这个脚本，并且能够为 SVG 绘制的日期和时间元素设置日期时间：

<script type="text/ecmascript"><![CDATA[

                // Format Date
                var date = new Date();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var year = date.getFullYear();

                var monthsByName = ["January", "February", "March",     "April", "May", "June", "July",
                    "August","September", "October", "November", "December"];

                var formattedDate = monthsByName[month - 1] + " " + day + ", " + year;

                var textNode = document.createTextNode(formattedDate);
                document.getElementById("epg-date").appendChild(textNode);

                // Format Time
                    // Source: bbrame @ StackOverflow
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12;
                minutes = minutes < 10 ? "0"+minutes : minutes;

                var formattedTime = hours + ':' + minutes + ' ' + ampm;

                var timeNode = document.createTextNode(formattedTime);
                document.getElementById("epg-time").appendChild(timeNode);

            ]]></script>
于 2013-03-14T05:08:07.553 回答