30

我正在尝试修改 .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 的结尾,以及如何填充和描边然后可以操纵它!

4

5 回答 5

45

如果您使用 img 标签,那么出于安全原因,您将无法访问图像数据的 DOM。就容器而言,图像实际上与动画位图相同。

使用<iframe>or<object>标记将允许您操作嵌入对象的 DOM。

于 2012-04-13T13:15:53.767 回答
9

我之前已经回答过类似的问题,将此片段保存为 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>
于 2012-04-13T10:59:29.420 回答
3

我认为您将需要修改单个元素的笔画,而不仅仅是 svg 元素本身。svg 将由节点树组成,这些节点具有笔画属性。

于 2012-04-13T11:01:38.553 回答
2

我不确定这是否已经解决。我遇到过类似的情况,最好的方法是将 svg 文件放在<bject>标签中并更改笔触属性而不是填充属性。

svgItem.style.stroke="lime";

您也可以参考以下部分:在此链接中更改 SVG 的 CSS 属性

我已经对此进行了测试,并且可以更改笔画属性。请参考这个截图,下面是对我有用的示例代码。

window.onload=function() {
	// Get the Object by ID
	var a = document.getElementById("svgObject");
	// Get the SVG document inside the Object tag
	var svgDoc = a.contentDocument;
	// Get one of the SVG items by ID;
	var svgItem = svgDoc.getElementById("pin1");
	// Set the colour to something else
	svgItem.style.stroke ="lime";
};

于 2016-12-14T14:33:25.647 回答
1

这是一个简单的示例,演示了使用 javascript 修改 SVG HTML 对象的属性:

<html>
  <body>
    <svg>
      <rect id="A1" x="10" y="10" width="25" height="25" fill="red" />
    </svg>
  </body>

  <script>
    alert("Acknowledge to modify object color.");
    var object = document.getElementById("A1");
    object.setAttribute("fill", "green");
  </script>
</html>
于 2013-03-20T17:43:23.750 回答