Javascript 使用javascript修改svg图像的描边和填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10139460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
modify stroke and fill of svg image with javascript
提问by Potney Switters
I am trying to modify the stroke and fill of an .svg image. I have been getting some information from Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?.
我正在尝试修改 .svg 图像的描边和填充。我从是否可以使用 JavaScript 操作嵌入在 HTML 文档中的 SVG 文档？.
I used javascript to manipulate it, the javascript in the header:
我使用 javascript 来操作它，标题中的 javascript：
function svgMod(){
var s = document.getElementById("svg_img");
s.setAttribute("stroke","0000FF");
}
the html:
html：
...
<body onload="svgMod();">
<img id="svg_img" src="image.svg">
...
Any help appreciated!
任何帮助表示赞赏！
EDIT:1 I think the main problem here is how to display an svg image as an svg element, an actual image that instead of an ending like .png or .jpeg, uses an ending of .svg, and furthermore how the fill and stroke of it can then be manipulated!
编辑：1 我认为这里的主要问题是如何将 svg 图像显示为 svg 元素，而不是像 .png 或 .jpeg 这样的结尾，而是使用 .svg 结尾的实际图像，以及如何填充和描边然后可以操纵它！
回答by Robert Longson
If you use an img tag then for security reasons you will not be able to access the DOM of the image data. The image is effectively the same as an animated bitmap as far as the container is concerned.
如果您使用 img 标签，那么出于安全原因，您将无法访问图像数据的 DOM。就容器而言，图像实际上与动画位图相同。
Using an <iframe>or <object>tag will allow you to manipulate the embedded object's DOM.
使用<iframe>or<object>标签将允许您操作嵌入对象的 DOM。
回答by peter
I've already answered something like this before, save this snippet as an html file.
我之前已经回答过类似的问题，将此代码段另存为 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>
EDIT: To prove this function can be set in the head, here is a modified version:
编辑：为了证明这个功能可以在头部设置，这里是一个修改版本：
<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>
回答by Phil H
I think you will need to modify the stroke of the individual element, not just the svg element itself. The svg will be composed of a tree of nodes, and it is these nodes which have the stroke attribute.
我认为您需要修改单个元素的笔触，而不仅仅是 svg 元素本身。svg 将由节点树组成，正是这些节点具有 stroke 属性。
回答by evilspacepirate
Here is a simpleexample that demonstrates modifying an attribute of an SVG HTML object using javascript:
这是一个简单的示例，演示了使用 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>
回答by Arun
I'm not sure if this has been resolved. I had experienced a similar scenario and the best way is to put the svg file in an <bject>tag and change the stroke property not fill property.
我不确定这是否已解决。我遇到过类似的情况，最好的方法是将 svg 文件放在<bject>标签中并更改笔触属性而不是填充属性。
svgItem.style.stroke="lime";
Also you may refer to the section: Changing CSS Properties of SVG in this link
您也可以参考以下部分：在此链接中更改 SVG 的 CSS 属性
I had tested this and could change the stroke property. Please refer to this screnshotand below is the sample code which worked for me.
我已经对此进行了测试，并且可以更改笔划属性。请参考这个截图，下面是对我有用的示例代码。
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";
};