使用javascript修改svg文件
我有一个名为“heartn.svg”的svg文件,其中包含以下代码:使用javascript修改svg文件,javascript,html,svg,Javascript,Html,Svg,我有一个名为“heartn.svg”的svg文件,其中包含以下代码: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 127.3 104.4" style="enable-background:new 0 0 127.3 104.4;" xml:space="preserve" >
<style type="text/css" >
.st0{fill:#FFFFFF;}
</style>
<g id="stuff">
<path class="st0" id= "int" d="M21,72.3c5,5,8.9,8.1,16.8,14.3c11.3,8.9,12.7,8.6,16.7,12.2c2,1.8,4.5,2.9,6.7,4.4c0.8,0.6,1.8,1.2,3,1.1
c1.1-0.1,1.7-0.8,3.5-2.2c0.9-0.7,0.6-0.4,3.1-2c5.2-3.4,10.6-7.3,10.6-7.3c5.9-4.3,10.3-7.8,11.7-8.9c5.4-4.4,8.7-7,12.9-11.2
c1.1-1.1,4.8-4.8,9.2-10.3c0.4-0.4,0.7-0.9,1-1.3c0,0,0,0,0,0H11.2C13.6,64.3,16.8,68.1,21,72.3z"/>
<path class="st0" d="M125.1,47.7c1.8-5,2-9.5,2.1-11.7c0.2-4.1-0.2-7.4-0.5-9.2c-0.3-2.1-0.8-4.8-2.1-8c-0.7-1.8-2.7-6.1-7-10.3
c-1.6-1.6-5.3-5.1-11.2-7c-4.7-1.5-8.7-1.4-11-1.2c-4.3,0.2-7.5,1.3-9.4,1.9c-1,0.3-5.5,1.9-10.6,5.4c-1.5,1.1-4,2.7-6.5,5.4
c-1.4,1.5-2,2.2-2.7,3.4c-1.2,2-1.6,3.7-2.3,3.6c-0.5,0-0.7-0.7-1.1-1.5c-0.1-0.2-1.1-1.5-3.1-4.1C56.1,9.5,51,6.1,51,6.1
c-1.7-1.2-6.3-4.1-13-5.3c-3-0.6-9.6-1.7-17.3,1.1c-2.3,0.8-7.6,3-12.2,8.3c-5.7,6.3-7,13.2-7.7,17.1c-0.5,2.6-1.3,7.3-0.3,13.1
c0.3,1.4,0.9,4.5,3.6,9.7c0,0,0,0,0,0h120.1C124.5,49.3,124.9,48.5,125.1,47.7z"/>
</g>
</svg>
<img id="heart" src="images/heartn.svg" alt="heart" />
使用javascript
在我的HTML文件中,我使用以下代码显示该文件:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 127.3 104.4" style="enable-background:new 0 0 127.3 104.4;" xml:space="preserve" >
<style type="text/css" >
.st0{fill:#FFFFFF;}
</style>
<g id="stuff">
<path class="st0" id= "int" d="M21,72.3c5,5,8.9,8.1,16.8,14.3c11.3,8.9,12.7,8.6,16.7,12.2c2,1.8,4.5,2.9,6.7,4.4c0.8,0.6,1.8,1.2,3,1.1
c1.1-0.1,1.7-0.8,3.5-2.2c0.9-0.7,0.6-0.4,3.1-2c5.2-3.4,10.6-7.3,10.6-7.3c5.9-4.3,10.3-7.8,11.7-8.9c5.4-4.4,8.7-7,12.9-11.2
c1.1-1.1,4.8-4.8,9.2-10.3c0.4-0.4,0.7-0.9,1-1.3c0,0,0,0,0,0H11.2C13.6,64.3,16.8,68.1,21,72.3z"/>
<path class="st0" d="M125.1,47.7c1.8-5,2-9.5,2.1-11.7c0.2-4.1-0.2-7.4-0.5-9.2c-0.3-2.1-0.8-4.8-2.1-8c-0.7-1.8-2.7-6.1-7-10.3
c-1.6-1.6-5.3-5.1-11.2-7c-4.7-1.5-8.7-1.4-11-1.2c-4.3,0.2-7.5,1.3-9.4,1.9c-1,0.3-5.5,1.9-10.6,5.4c-1.5,1.1-4,2.7-6.5,5.4
c-1.4,1.5-2,2.2-2.7,3.4c-1.2,2-1.6,3.7-2.3,3.6c-0.5,0-0.7-0.7-1.1-1.5c-0.1-0.2-1.1-1.5-3.1-4.1C56.1,9.5,51,6.1,51,6.1
c-1.7-1.2-6.3-4.1-13-5.3c-3-0.6-9.6-1.7-17.3,1.1c-2.3,0.8-7.6,3-12.2,8.3c-5.7,6.3-7,13.2-7.7,17.1c-0.5,2.6-1.3,7.3-0.3,13.1
c0.3,1.4,0.9,4.5,3.6,9.7c0,0,0,0,0,0h120.1C124.5,49.3,124.9,48.5,125.1,47.7z"/>
</g>
</svg>
<img id="heart" src="images/heartn.svg" alt="heart" />
我真的不知道该怎么办,我已经尝试将id添加到svg文件中,但我真的找不到改变颜色的方法
任何帮助都将不胜感激。谢谢
********编辑*******
if (jsonObj.heart>16) {
var heart_img=document.getElementById("heart").contentDocument;
heart_img.getElementByClassName("st0").setAttribute("fill", "FF0000");
};
我尝试了这个方法,但没有效果。如果您将元素添加到html中,而不是在图像标记中链接到它,您将能够使用javascript操作svg 即
代码>
它不应该在iframe中。
一个选项是使用javascript向路径添加一个类。因此,例如,您可以将类“active”添加到.str0
您的css如下所示:
if (jsonObj.heart>16) {
var heart_img=document.getElementById("heart");
};
.str0 {
fill : <some color>
}
.str0.active {
fill:#00ff00;
}
这可以追溯到IE9
也值得一看
编辑
var el = document.getElementsByClassName('st0');
el[0].style.fill = "#FF0000";
编辑以包括下面评论中提到的更改颜色的更简单方法。从
<iframe id="heart" src="images/heartn.svg" frameborder="0" onload="modify()"></iframe>
文档中有一个样式表,这就是为什么它是样式表[0]
<style type="text/css" >
.st0{fill:#FFFFFF;}
</style>
.st0{fill:#FFFFFF;}
这个样式表有一个规则(.st0),因此我们修改了cssRules[0]。修改规则会影响指向它的所有内容
如果将svg内联,您仍然可以修改样式规则,在这种情况下,您只需使用html全局文档而不是iframe的文档
我不能在堆栈片段中演示
(因为我需要另一个文件),堆栈片段本身插入了一个样式表,这意味着我需要使用下面的样式表[1]。这适用于Firefox和Safari:
.st0{fill:#FFFFFF;}
document.styleSheets[1].cssRules[0].style.fill=“#FF0000”;
无法访问
元素的DOM。您可以尝试改用'`或
。@RobertLongson谢谢!我做到了。现在看起来是这样的:
,但是我应该如何更改svg文件呢?在iframe文档的onload事件中。getElementById(“heart”)。contentDocument获取文档或文档。getElementById(“heart”)。documentElement获取根元素。然后像修改本地文档一样继续操作。现在我有了:`var heart\u img=document.getElementById(“heart”).contentDocument;`如果这是一个本地元素,我将如何准确地导航?如何将:.st0{fill:#FFFFFF;}
更改为`.st0{fill:#FF0000;}`?我现在做的是:
在我的javascript中,我有if(jsonObj.heart>16){var heart\u img=document.getElementById(“heart”).setAttribute(“fill”,“FF0000”)代码>但它不会更改SVG的颜色。我不知道您如何访问svg中的.st0{fill:#FFFFFF;}
在这种情况下,我如何才能导航到.st0{fill:#ffffffff;}并更改其值?我在el[0]行遇到问题。className=el[0]。className+=“active”
Inspector告诉我:TypeError:undefined不是一个对象(计算'el[0].className')var el=document.getElementsByClassName('st0');el[0]。style.fill=“#FF0000”如果html页面中有svg代码而不是单独的文件,则code>将更改颜色。这就不需要额外的课程等。希望这能有所帮助。
<style type="text/css" >
.st0{fill:#FFFFFF;}
</style>