Pot*_*ers 24 html javascript svg
我正在尝试修改.svg图像的笔触和填充.我已经从中获取了一些信息是否可以使用JavaScript操作嵌入在HTML文档中的SVG文档？.
我使用javascript来操作它,标题中的javascript:
function svgMod(){
var s = document.getElementById("svg_img");
s.setAttribute("stroke","0000FF");
}
html:
...
<body onload="svgMod();">
<img id="svg_img" src="image.svg">
...
任何帮助赞赏!
编辑:1我认为这里的主要问题是如何将svg图像显示为svg元素,而不是像.png或.jpeg这样的结尾的实际图像使用.svg的结尾,以及填充和描边的方式它可以被操纵!
Rob*_*son 38
如果您使用img标记,那么出于安全原因,您将无法访问图像数据的DOM.就容器而言,图像实际上与动画位图相同.
使用<iframe>或<object>标记将允许您操纵嵌入对象的DOM.
我之前已经回答了这样的问题,将此片段保存为html文件.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
编辑:为了证明这个功能可以设置在头部,这里是一个修改版本:
<html>
<head>
<script>
function svgMod(){
var circle1 = document.getElementById("circle1");
circle1.style.fill="blue";
}
</script>
</head>
<body>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
<circle id="circle1" r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2"/>
</svg>
<button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
<button onclick=jacascript:svgMod();>Click to change to blue</button>
</body>
</html>