首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >svg标记内的Javascript

svg标记内的Javascript
EN

Stack Overflow用户
提问于 2018-07-24 07:45:35
回答 1查看 160关注 0票数 0

我正在尝试使用SVG生成折线图。一切都很好,除了当我尝试插入圆或其他项目到SVG的形式,由Javascript生成的变量在这个页面上。

我有一些变量y_axis_Max design_x_Value design_y_Value,我在前面页面的JavaScript中给它们赋值了。

例如,下面的代码...要在页面上动态写入文本,请执行以下操作:

代码语言:javascript
复制
<text x="100" y="100" dx="-30"dy="10">
    <SCRIPT LANGUAGE="JavaScript">
    document.write(""+ y_axis_Max +"")</SCRIPT>
</text>

动态创建圆的代码不起作用:

代码语言:javascript
复制
<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的那个。一定有办法做到这一点。

谢谢

EN

回答 1

Stack Overflow用户

发布于 2018-07-24 08:17:25

您可以从JS设置属性:

代码语言:javascript
复制
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);
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51488577

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档