Question

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

我用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的结尾，以及如何然后可以操纵它的填充和行程！

Answer 1

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

使用<iframe>或<object>标记可以操作嵌入对象的DOM。

Answer 2

我之前已经回答过这样的问题，将此代码段保存为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>

Answer 3

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

Answer 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>

Answer 5

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

svgItem.style.stroke="lime";

您也可以参考以下部分：在此link

中更改SVG的CSS属性

我测试了这个，可以改变笔画属性。请参阅此screnshot，以下是适用于我的示例代码。

＆＃13;

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

＆＃13;

使用javascript修改svg图像的笔划和填充

5 个答案: