我有一个svg文件,有一些形状和一些文字.我想在运行时修改svg,以便某些形状可以改变颜色,而某些文本可以改变其内容.
假设我在外部svg文件中只有两个元素:
circle1:一个蓝色的圆圈和那个id
text1:包含带有该id的" - "的文本
现在我可以在我的html中查看该文件了
<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>
从图像附近的按钮,使用jQuery,我可以捕获onClick事件:我想用红色填充cicle并将文本更改为"hello word".
我怎样才能做到这一点？有基于jQuery的解决方案吗？
我找到了jquery.svg插件,但似乎只能修改运行时创建的文档.
谢谢.
Red*_*dax 14
完成!
最后我找到了关于jQuery.svg的文档.和svg本身.
让我们从代码开始:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#svgload").svg({
onLoad: function()
{
var svg = $("#svgload").svg('get');
svg.load('Red1.svg', {addTo: true, changeSize: false});
},
settings: {}}
);
$('#btnTest').click(function(e)
{
var rect = $('#idRect1');
rect.css('fill','green');
//rect.attrib('fill','green');
var txt = $('#idText1');
txt.text('FF');
});
});
</Script>
<div id="svgload" style="width: 100%; height: 300px;"></div>
<div id="btnTest">
Click Me!
</div>
</body>
</html>
这个示例Red1.svg文件:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="idRect1" fill="#FF0000" width="300" height="300"/>
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>
</svg>
使用jQuery,我在运行时加载了外部Red1.svg.点击btnTest我设置文本和填充颜色.
在我的研究中,我发现:
SVG允许您选择设置填充颜色的方式
2A.有风格
rect.css('fill','green');
2B.带有特定标签
rect.attr('fill','green');
所以你的代码必须根据生成svg的程序而改变.
祝你今天愉快.