svg标记内的Javascript

Question

我正在尝试使用SVG生成折线图。 一切都很好，除非我尝试以本页上Javascript生成的变量的形式将圆或其他项目插入SVG中。

我在页面上的JavaScript中已为变量y_axis_Max design_x_Value design_y_Value分配了值。

例如，在...中的以下代码可在页面上动态写入文本：

<text x="100" y="100" dx="-30"dy="10">
    <SCRIPT LANGUAGE="JavaScript">
    document.write(""+ y_axis_Max +"")</SCRIPT>
</text>

此代码无法动态创建圆：

<circle id="pointB" cx="
<SCRIPT LANGUAGE="JavaScript">
document.write(""+ design_x_Value +"")</SCRIPT>
" cy="
<SCRIPT LANGUAGE="JavaScript">
document.write(""+ design_y_Value +"")</SCRIPT>
" r="3" stroke="black" stroke-width="3" fill="black"/>

显然，一种有效的代码在标签外部有JavaScript，而另一种在标签内部没有JavaScript。 必须有一种方法可以做到这一点。

谢谢

Answer 1

您可以从JS设置属性：

 var y_axis_Max = 100, design_x_Value = 50, design_y_Value = 20; var text = document.querySelector('text'); text.textContent = y_axis_Max; var point = document.querySelector('#pointB'); point.setAttribute('cx', design_x_Value); point.setAttribute('cy', design_y_Value);

 <svg viewBox="0 0 300 100"> <text x="10" y="20"></text> <circle id="pointB" r="3" stroke="black" stroke-width="3" fill="black"/> </svg>

Answer 2

编写代码的方式非常类似于PHP的工作方式：遍历一个文件，当遇到脚本部分时，对它们进行解释，并用其结果替换脚本标签内容，以生成更改的序列化形式。 那是典型的服务器端生产。

相反，JavaScript是客户端解释的。 该文件用于将文件反序列化为表示对象DOM（文档对象模型）。 脚本会针对该模型进行解释，只要可以在遇到脚本时就构建该模型，但始终针对整个模型。

您的第一个脚本起作用只是偶然的，并且取决于很多事情不会出错。 这是HTML5规范对document.write() ：

警告！ 此方法具有非常特殊的行为。 在某些情况下，此方法可能会在运行解析器时影响HTML解析器的状态，从而导致DOM与文档源不对应。 在其他情况下，该调用可以首先清除当前页面，就像已调用document.open()一样。 在更多情况下，该方法将被忽略或抛出异常。 更糟糕的是，在某些情况下，此方法的确切行为可能取决于网络延迟，这可能会导致很难调试的故障。 由于所有这些原因，强烈建议不要使用此方法。

如果您的SVG是一个独立文件，则该方法调用根本不会起作用。

第二个示例不是有效的XML或HTML。 <script>标记是HTML标记，与其他标记一样，必须放置为另一个标记的子代，而不是位于标记标记内。

正确的格式如下所示。 我在他的答案中使用的是Kosh Very提供的代码，但不是将其显示为隐藏最终标记结构的可执行代码段，而是将其写在文件中。 请注意，脚本的一部分位于<svg>结束标记之后，因为只有这样DOM才包含被document.querySelector()引用的<text>和<circle>元素。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
var y_axis_Max = 100, design_x_Value = 50, design_y_Value = 20;
        </script>
    </head>
    <body>
        <svg viewBox="0 0 300 100">
           <text x="10" y="20">100</text>
           <circle id="pointB" r="3" stroke="black" stroke-width="3" fill="black" cx="50" cy="20"></circle>
        </svg>
        <script type="text/javascript">
var text = document.querySelector('text');
text.textContent = y_axis_Max;

var point = document.querySelector('#pointB');

point.setAttribute('cx', design_x_Value);
point.setAttribute('cy', design_y_Value);
        </script>
    </body>
</html>

svg标记内的Javascript

问题描述

2 个解决方案

解决方案1
0 2018-07-24 00:17:25

解决方案2
0 2018-07-24 16:52:35

svg标记内的Javascript

问题描述

2 个解决方案

解决方案1 0 2018-07-24 00:17:25

解决方案2 0 2018-07-24 16:52:35

解决方案1
0 2018-07-24 00:17:25

解决方案2
0 2018-07-24 16:52:35