用js怎么获取svg图元素和元素的文本值

traveller 2011-09-01 12:40:55
这是我加载svg图生成的代码<embed name="svg" id="svg" type="image/svg+xml" src="svgOverviewpic/line.svg" width="1100px"
height="768px"></embed>
这张图的部分代码
<rect
style="fill:#916f6f;fill-opacity:1"
id="rect2560"
width="69.647057"
height="15.529411"
x="-112.6692"
y="25.624004" />
<text
xml:space="preserve"
style="font-size:13.34806728px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
x="-100.54376"
y="20.824251"
id="text2562"
transform="scale(1.2190701,0.8202974)"><tspan
sodipodi:role="line"
id="tspan2564"
x="-100.54376"
y="20.824251" /></text>
<text
xml:space="preserve"
style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
x="-123.29412"
y="22.588236"
id="text2566"><tspan
sodipodi:role="line"
id="tspan2568"
x="-123.29412"
y="22.588236" /></text>
<a
id="a2574"
transform="translate(19.095524,16.682828)">
<text
xml:space="preserve"
style="font-size:12.77499962px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:SimSun;-inkscape-font-specification:SimSun"
x="-122.52769"
y="21.843281"
id="text2570"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan2572"
x="-122.52769"
y="21.843281"><a
xlink:href="javascript:Button4_onclick()"
id="a237">关闭声音</a></tspan></text>


请问我要是用javascript 对关闭声音进行事件 要求点击关闭声音 文本内容变成开启声音 再点击 开启声音文本内容变成关闭声音，求js代码
...全文
4283 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
wktdh 2011-09-07
  • 打赏
  • 举报
 回复
ul>li>input
var liList = getElementById("ul").children;
循环li
var li = liList[j];
bind(li,"clock",function(){
for(var i=0;i<liList.length;i++){
var index=0;
if(liList[i]==index)
getElementById("").innerHTML = "关闭";
else
getElementById("")..innerHTML = "开启";
}
})
bind函数省略，哎，胡乱写写，偶也不太懂
CalvinR 2011-09-01
  • 打赏
  • 举报
 回复
偶不知道哦
顶一下吧
孟子E章 2011-09-01
  • 打赏
  • 举报
 回复
另外，你可以一步一步调试哪行出的问题
孟子E章 2011-09-01
  • 打赏
  • 举报
 回复
你写link里面，不是事件，所以，里面的事件相关的东西是无法使用了
traveller 2011-09-01
  • 打赏
  • 举报
 回复
function Button4_onclick() {

//evt.target.textContent = evt.target.textContent == "关闭声音"?"开启声音":"关闭声音"
SQD.lineReview.SoundStop();


svgViewer = document.getElementById("svg");
SVGDocument = svgViewer.getSVGDocument();
svgRoot = SVGDocument.rootElement;
var a=SVGDocument.getElementById("a237")
//var txt=rect.getElementById("a237");
a.setAttribute("textContent", "开启声音")
// var rect=SVGDocument.getElementById("rect2560")
// rect.setAttribute("fill","red");
// if(txt.TextNode =="关闭声音")
// {
// txt.TextNode="开启声音";
// //调用关闭声音的方法
// }
// else
// {
// txt.TextNode="关闭声音";
// //调用开启声音的方法
// }
}


这么写 怎么不行了
traveller 2011-09-01
  • 打赏
  • 举报
 回复
4楼的 我想再追问一下，我不想把js代码内嵌在svg里 怎么实现呢
孟子E章 2011-09-01
  • 打赏
  • 举报
 回复
ie9,ff6,chrome13,safari5,opera11都支持
孟子E章 2011-09-01
  • 打赏
  • 举报
 回复
svg也是遵照DOM的，你可以这样
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="526" height="233" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
function Button4_onclick(evt) {
evt.target.textContent = evt.target.textContent == "关闭声音"?"开启声音":"关闭声音"
}
]]>
</script>
<text x="20" y="40"><a onclick="Button4_onclick(evt)" id="a237">关闭声音</a></text>
</svg>


子夜__ 2011-09-01
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">

<title>Insert title here</title>

<script type="text/javascript">

    function load() {

        var embedTag = document.createElement('embed');

        embedTag.type = "image/svg+xml";

        embedTag.width = "640";

        embedTag.height = "480";

        embedTag.onload = function() {

            alert(embedTag.getSVGDocument());

        };

        embedTag.src = "test.svg";

        document.body.appendChild(embedTag);

    }

</script>

</head>

<body onload="load();">

</body>

</html>



<?xml version="1.0" standalone="no"?> 

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" onload="init(evt);">

    <script type="text/javascript">

    <![CDATA[

        function init() {

            alert(1);

        }

    ]]>

    </script>

    <line x1="20" y1="20" x2="70" y2="20" style="stroke:black"/>    

</svg>

参考
traveller 2011-09-01
  • 打赏
  • 举报
 回复
大家帮忙顶一下啊 谢谢
javascript实现svg导出图片
JavaScript通过SVG DOM API可以直接访问和修改SVG元素。例如，可以使用`document.getElementById`或`querySelector`选择特定的SVG元素，然后通过修改其属性（如`fill`、`stroke`等）来改变图形的外观。 要将SVG导出...
javascript将svg转图片代码组件，亲测有效；
1. **获取SVG内容**：首先，你需要获取SVG元素的XML表示。这可以通过JavaScript的`innerHTML`属性或`document.querySelector()`方法来实现。例如，如果你有一个ID为`mySVG`的SVG元素，可以这样获取其内容： ```...
svg雷达图效果，js技术
1. **DOM操作**：通过`document.getElementById`、`querySelector`等方法获取SVG元素，然后使用`setAttribute`改变属性值，如颜色、大小等。 2. **事件监听**：添加`addEventListener`来响应用户的点击、鼠标移动等...
中国地图svg_地图_中国地图的SVG_
SVG文件由一系列的路径数据、形状元素和文本元素组成，可以被浏览器直接解析和渲染。 2. jVectorMap库：jVectorMap是一个JavaScript库，专门用于在Web应用中显示交互式矢量地图。它支持SVG地图，并提供了丰富的API...
svg 画流程图
这可以通过监听`input`或`change`事件来完成，当用户输入新值时，实时更新SVG元素的属性。 保存功能通常需要将SVG图形转化为一种持久化的格式，如XML文件或者数据库存储。可以使用JavaScript的`XMLSerializer`对象...
.NET社区

62,240

社区成员

669,001

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章