用javascript修改svg图像的描边和填充答案

【问题标题】：modify stroke and fill of svg image with javascript用javascript修改svg图像的描边和填充
【发布时间】：2012-04-25 17:40:54
【问题描述】：

我正在尝试修改 .svg 图像的笔触和填充。我从Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?得到了一些信息。

我是用javascript来操作的，header中的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 结尾的实际图像，以及如何然后可以操纵它的填充和描边！

【问题讨论】：

标签： javascript html svg

【解决方案1】：

我之前已经回答过类似的问题，将这个sn-p保存为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>

【讨论】：

谢谢彼得，我尝试了你的解决方案，它适用于一个圆圈，但是当我用 img 属性尝试它时它不起作用！
首先尝试用你想要使用的svg的内容替换我的圈子，如果这样你应该能够嵌入svg并以同样的方式改变它，我认为你不能使用 img 标签来做到这一点

【解决方案2】：

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

【讨论】：

嘿菲尔，它是一个 img 元素而不是 svg 元素，它只是图像是一个 .svg 文件。
尝试将其更改为嵌入：w3schools.com/svg/svg_inhtml.asp 然后您应该能够将其作为 DOM 的一部分进行操作。
感谢菲尔的回复。我将图像元素转换为但结果是一样的。
看起来它只能在实际的 svg 标记的情况下进行修改，然后。可以在html文件中包含svg inline的内容吗？
这是我正在写的内联内容：<svg id="another_id" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in"> <embed id ="svg_image_id" src="waveform.svg" height="300px;" width="100%" type="image/svg+xml"/> </svg>

【解决方案3】：

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

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

【讨论】：

+1 是了解 OP 所遇到问题的唯一答案。
嗨罗伯特，感谢您的回复。我使用了<object>，但它仍然没有改变填充。 Javascript：function svgMod(){ alert("Fill in blue"); var circle1 = document.getElementById("svg_image_id"); circle1.style.fill="blue"; } 和 HTML：<object data="waveform.svg" type="image/svg+xml" id="svg_image_id"></object> <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button> <button onclick=jacascript:svgMod();>Click to change to blue</button>
你想要类似 document.getElementById("svg_image_id").getSVGDocument().getElementById("circle_id").style.fill="blue";
这种方法现在不太好用：stackoverflow.com/questions/22529398/…
@kev 如今也不例外。跨站点脚本从未被允许。如果您控制两个域 CORS 启用可能会有所帮助

【解决方案4】：

这是一个简单示例，演示了如何使用 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>

【讨论】：

【解决方案5】：

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

svgItem.style.stroke="lime";

您也可以参考link 中的部分：更改 SVG 的 CSS 属性

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

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";
};

【讨论】：