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 回答